Knockout.js - 在不永久绑定到模型的情况下在下拉菜单上设置属性
Knockout.js - Set an attribute on drop-down without permanently binding to model
我想我有一个很笼统的问题,但它是针对特定应用程序的。我只是想知道如何在等于下拉列表初始值的下拉列表上设置自定义属性。该值将从 KnockOut 视图模型值绑定,但我不想永久绑定它,因此如果它发生变化,该属性的值不会改变:
<select data-bind="options: availableSlots, attr: { preset: SlotPosition }, event: {'change', myChangeRoutine} " ></select>
在上面的示例中,preset
是我的属性,我想将其设置为 SlotPosition
,它在我的视图模型中,也是下拉列表最初自动设置的内容。 availableSlots
是一个 MVC 服务器端创建的 SelectListItem,它有插槽 1 到 x 个项目,我 return 作为 ko.observableArray() 进入我的视图模型。 (在服务器端代码中,我将 Selected
设置为 true 需要设置的地方,对于给定值,并构建选项。)
上面的示例将我的属性 preset
绑定到模型的值 SlotPosition
,但我只是希望它在更改之前记住该值,而不是永久绑定到它。我遇到的问题是,在 myChangeRoutine
中,preset
的值已经成为下拉列表更改的值。我希望它能工作,这样当我更改下拉列表的值并运行 myChangeRoutine
时,我可以用旧值做一些事情。
只需将您的 SlotPosition
设置为简单的普通值,而不是 ko.observable
,这将是一次性绑定的。
或者使用 attr { preset : SlotPosition.peek() }
,见 documentation.
好吧,这可以通过更简单的方式实现,不需要任何更改事件和其他使视图变得复杂的东西。我们只需要使用 subscribe
查看模型:
var ViewModel = function () {
var self = this;
self.availableSlots = ko.observableArray(slots);
self.Id = '999';
self.SlotPosition = ko.observable();
self.Preset = ko.observable(1);
self.SlotPosition.subscribe(function(newVal){
if(newVal == self.Preset()) return false;
var newVal = self.SlotPosition();
alert('newVal: ' + newVal);
alert('oldVal: ' + self.Preset());
// Then, I find my other dropdown from the next model
// using the newVal, and set it to oldVal
// After doing you work set the newVal to self.Preset
self.Preset(newVal);
});
};
ko.applyBindings( new ViewModel() );
查看:
<div>
<select data-bind="options: slots, optionsText: 'Text', optionsValue: 'Value', value: SlotPosition"> </select>
</div>
不使用 peek 工作 fiddle 使用订阅 here
使用 peek 工作 fiddle 使用订阅 here
我想我有一个很笼统的问题,但它是针对特定应用程序的。我只是想知道如何在等于下拉列表初始值的下拉列表上设置自定义属性。该值将从 KnockOut 视图模型值绑定,但我不想永久绑定它,因此如果它发生变化,该属性的值不会改变:
<select data-bind="options: availableSlots, attr: { preset: SlotPosition }, event: {'change', myChangeRoutine} " ></select>
在上面的示例中,preset
是我的属性,我想将其设置为 SlotPosition
,它在我的视图模型中,也是下拉列表最初自动设置的内容。 availableSlots
是一个 MVC 服务器端创建的 SelectListItem,它有插槽 1 到 x 个项目,我 return 作为 ko.observableArray() 进入我的视图模型。 (在服务器端代码中,我将 Selected
设置为 true 需要设置的地方,对于给定值,并构建选项。)
上面的示例将我的属性 preset
绑定到模型的值 SlotPosition
,但我只是希望它在更改之前记住该值,而不是永久绑定到它。我遇到的问题是,在 myChangeRoutine
中,preset
的值已经成为下拉列表更改的值。我希望它能工作,这样当我更改下拉列表的值并运行 myChangeRoutine
时,我可以用旧值做一些事情。
只需将您的 SlotPosition
设置为简单的普通值,而不是 ko.observable
,这将是一次性绑定的。
或者使用 attr { preset : SlotPosition.peek() }
,见 documentation.
好吧,这可以通过更简单的方式实现,不需要任何更改事件和其他使视图变得复杂的东西。我们只需要使用 subscribe
查看模型:
var ViewModel = function () {
var self = this;
self.availableSlots = ko.observableArray(slots);
self.Id = '999';
self.SlotPosition = ko.observable();
self.Preset = ko.observable(1);
self.SlotPosition.subscribe(function(newVal){
if(newVal == self.Preset()) return false;
var newVal = self.SlotPosition();
alert('newVal: ' + newVal);
alert('oldVal: ' + self.Preset());
// Then, I find my other dropdown from the next model
// using the newVal, and set it to oldVal
// After doing you work set the newVal to self.Preset
self.Preset(newVal);
});
};
ko.applyBindings( new ViewModel() );
查看:
<div>
<select data-bind="options: slots, optionsText: 'Text', optionsValue: 'Value', value: SlotPosition"> </select>
</div>
不使用 peek 工作 fiddle 使用订阅 here
使用 peek 工作 fiddle 使用订阅 here