Как заставить выпадающий список изменять несколько свойств модели представления?

#knockout.js

#knockout.js

Вопрос:

Я кодирую (см. Этот jsfiddle) следующим образом:

 <h2>Knockout with jQuery UI Widget Bindings</h2>

<div>
  <label for='from'>Date From:</label>
  <input id='from' type='text' 
    data-bind='jqueryui: "datepicker",
               value: from' />
  <small>(with datepicker)</small>
</div>

<div>
  <label for='to'>Date To:</label>
  <input id='to' type='text' 
    data-bind='jqueryui: "datepicker",
               value: to' />
  <small>(with datepicker)</small>
</div>

<select id="Range" name="Range" data-bind="value: range, options:ranges, optionsText:'name'">
  

И этот Javascript:

 var viewModel = {
    ranges : [
        {name:'Yesterday',value:'Yesterday'}, 
        {name:'Last7Days',value:'Last 7 Days'}, 
        {name:'Last14Days',value:'Last 14 Days'}, 
        {name:'LastFullWeek',value:'Last Full Week'}, 
        {name:'LastFullFortnight',value:'Last Full Fortnight'}, 
        {name:'LastFullThreeWeeks',value:'Last Full Three Weeks'}, 
        {name:'LastMonth',value:'Last Month'}, 
        {name:'MonthToDate',value:'Month To Date'}, 
        {name:'LastQuarter',value:'Last Quarter'}, 
        {name:'Select',value:'Select'}
    ],
    from: ko.observable(''),
    to: ko.observable(''),
    range: ko.observable('')
};
ko.applyBindings(viewModel);
  

Я хочу сбросить дату с и до, когда я выбираю значение из выпадающего списка.
Точно так же, если я вручную выбираю значение с помощью datepicker, я хочу изменить выпадающий список на «Выбрать»

Есть идеи, как это сделать?

Ответ №1:

Хорошим вариантом являются подписки вручную.

Что-то вроде:http://jsfiddle.net/rniemeyer/N58rf /

Основная идея заключается в следующем:

 viewModel.range.subscribe(function(newValue) {
    if (newValue amp;amp; newValue.value !== 'Select') {
        this.from('').to('');
    }
}, viewModel);
  

Комментарии:

1. небольшая проблема, событие запускается только один раз

2. Можете ли вы прояснить проблему? Подписка будет вызываться при каждом изменении. Если вы использовали IE, я заметил одну проблему, связанную с тем, что в массиве опций была запятая в конце. Исправлено в скрипте.

3. ладно, я тупой. Я устанавливал ViewModel.range внутри функции, которую я вызывал при событии subscribe