Изменение наблюдаемого значения при изменении раскрывающегося списка Нокаут Js
У меня есть это раскрывающееся меню, в котором есть опции, если автомобиль новый или используется.
<select name="VehicleType" id="vehicleTypeDropdown" data-bind="value: VehicleType">
<option value="New" selected="selected">Nuevo</option>
<option value="Used">Usado</option>
</select> `
И этот ввод:
<input type="text" name="Mileage" data-bind="disable: VehicleType() === 'New',value: Mileage" class="input-large"> `
Если значение в выпадающем меню выбрано "Создать", вход должен быть отключен, и если он используется, вход должен быть включен, но если я введу значение, то наблюдаемое будет захватывать это значение, и если я изменю значение раскрывающегося списка на новое наблюдаемое должен стать нулевым.
Ответы
Ответ 1
Ручная подписка в вашей модели просмотра - хороший способ справиться с чем-то подобным. Подписка может выглядеть так:
this.VehicleType.subscribe(function(newValue) {
if (newValue === "New") {
this.Mileage(0);
}
}, this);
Вот пример использования: http://jsfiddle.net/rniemeyer/h4cKC/
HTML:
<select name="VehicleType" id="vehicleTypeDropdown" data-bind="value: VehicleType">
<option value="New" selected="selected">Nuevo</option>
<option value="Used">Usado</option>
</select>
<input type="text" name="Mileage" data-bind="disable: VehicleType() === 'New', value: Mileage" class="input-large">
<hr/>
<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>
JS:
var ViewModel = function() {
this.VehicleType = ko.observable();
this.Mileage = ko.observable();
this.VehicleType.subscribe(function(newValue) {
if (newValue === "New") {
this.Mileage(0);
}
}, this);
};
ko.applyBindings(new ViewModel());
Ответ 2
Если вы используете ko mapping plugin, вы можете перехватить создание нового объекта и настроить там подписку. Если у вас есть весь список элементов, и вы хотите выполнить действие, когда что-то изменится.
Это модель представления для позиции корзины покупок (такие свойства, как qty
, sku
, description
, price
).
// View Model for an item in my shopping cart
var CartItemViewModel = function(data)
{
// map all the properties
// we could map manually if we want, but that the whole point of
// the mapping plugin that we don't need to
ko.mapping.fromJS(data, {}, this);
// subscribe to qty change
this.qty.subscribe(function (newValue)
{
alert('qty now ' + this.qty());
// UpdateCart()
}, this);
// add computed observables if needed
// ....
}
Когда вы обновляете (или создаете) свою модель с помощью плагина сопоставления, вы указываете, что для свойства, называемого "элементами", каждый элемент в массиве должен быть создан с помощью указанной вами функции "create".
var mapping =
{
'items':
{
// map cart item
create: function (options)
{
return new CartItemViewModel(options.data);
}
}
};
var data = ...... // get your data from somewhere
// update the CartViewModel using the mapping rules
ko.mapping.fromJS(data, mapping, rrvm.CartViewModel);