模板内选项绑定的奇怪行为
Strange behavior of option binding inside of template
由于某种原因,如果在挖空模板中定义了选择控件,则我无法选择具有空值的选项,因为选择会立即将其状态更改为默认值。注意:如果在外部定义选择,则工作正常。试试吧:
var ViewModel = function(){
var self = this;
self.options = [ null, 1, 2, 3];
self.selectedOption = ko.observable();
self.onSelectionChange = ko.computed(function(){
alert(self.selectedOption());
});
self.items = [{someProp: null, title: "item 1"},
{someProp: 2, title: "item 2"},
{someProp: 1, title: "item 3"},
{someProp: 1, title: "item 4"},
{someProp: 3, title: "item 5"}];
self.filteredItems = ko.computed(function(){
return self.items.filter(function(item){
return item.someProp === self.selectedOption();
});
});
};
ko.applyBindings(new ViewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="template: { name: 'list-template', data: filteredItems }"></div>
<script id="list-template" type="text/html">
<select data-bind="options: $root.options,
optionsCaption: 'select...',
value: $root.selectedOption"></select>
<ul data-bind="foreach: $data">
<li data-bind="text: title"></li>
</ul>
</script>
谁能解释一下为什么它这样工作?我应该理解一些东西还是似乎是淘汰赛问题?
更新:此代码只是真实代码的归结示例。没有意义告诉我这是毫无意义的;)我只是在表中有一些记录,其中一些列按某些字段进行过滤。我需要选择可以同时具有欠限定值和空值,因为未定义意味着过滤器处于非活动状态,而空意味着我应该显示所有具有未设置字段的记录。
Knockout 在将未定义、null 和空字符串写入选择时将它们视为相同的值。
请参阅下面的写入值:
ko.selectExtensions = {
readValue : function(element) {
switch (ko.utils.tagNameLower(element)) {
case 'option':
if (element[hasDomDataExpandoProperty] === true)
return ko.utils.domData.get(element, ko.bindingHandlers.options.optionValueDomDataKey);
return ko.utils.ieVersion <= 7
? (element.getAttributeNode('value') && element.getAttributeNode('value').specified ? element.value : element.text)
: element.value;
case 'select':
return element.selectedIndex >= 0 ? ko.selectExtensions.readValue(element.options[element.selectedIndex]) : undefined;
default:
return element.value;
}
},
writeValue: function(element, value, allowUnset) {
switch (ko.utils.tagNameLower(element)) {
case 'option':
switch(typeof value) {
case "string":
ko.utils.domData.set(element, ko.bindingHandlers.options.optionValueDomDataKey, undefined);
if (hasDomDataExpandoProperty in element) { // IE <= 8 throws errors if you delete non-existent properties from a DOM node
delete element[hasDomDataExpandoProperty];
}
element.value = value;
break;
default:
// Store arbitrary object using DomData
ko.utils.domData.set(element, ko.bindingHandlers.options.optionValueDomDataKey, value);
element[hasDomDataExpandoProperty] = true;
// Special treatment of numbers is just for backward compatibility. KO 1.2.1 wrote numerical values to element.value.
element.value = typeof value === "number" ? value : "";
break;
}
break;
case 'select':
if (value === "" || value === null) // A blank string or null value will select the caption
value = undefined;
var selection = -1;
for (var i = 0, n = element.options.length, optionValue; i < n; ++i) {
optionValue = ko.selectExtensions.readValue(element.options[i]);
// Include special check to handle selecting a caption with a blank string value
if (optionValue == value || (optionValue == "" && value === undefined)) {
selection = i;
break;
}
}
if (allowUnset || selection >= 0 || (value === undefined && element.size > 1)) {
element.selectedIndex = selection;
}
break;
default:
if ((value === null) || (value === undefined))
value = "";
element.value = value;
break;
}
}
};
您将不得不使用与 null 不同的键(-1 是常见的选择(
在你的例子中发生了很多奇怪的事情,包括:
- 您有一个项目数组,每个项目都有一个名为"key"的属性,但是有重复的键(那不是真正的键,是吗?
- 您有一个伪装成事件处理程序或更改订阅的
computed
; - 您在模板中具有
select
,但不清楚原因,因为它没有引用上下文中的任何$data
; options
和items
清单似乎具有相同的目的;- 你初始化可观察量时没有任何东西(实际上用
undefined
(,尽管你的意思是用 null 初始化它。但是,null 有点特别,如果您尝试将null
设为显式值,我不希望 KO 的行为可预测(至少对我来说(。使用您已经拥有的显式 Null 对象(self.items
中的第一个对象(更有意义;
但是,如果不直接回答你的问题(我不能,但其他人可能会?(,我仍然可以为你提供另一种处理事情的方式。使用整个item
作为所选项目。
下面是一个可预测地适用于 IMO 的示例:
var ViewModel = function() {
var self = this;
self.options = [
{ key: null, value: "null item" },
{ key: 1, value: "item 1a" },
{ key: 1, value: "item 1b" },
{ key: 2, value: "item 2" }
];
self.selectedOption = ko.observable(self.options[0]);
self.filteredItems = ko.computed(function() {
return self.options.filter(function(item) {
return item.key === self.selectedOption().key;
});
});
};
ko.applyBindings(new ViewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="template: { name: 'list-template', data: filteredItems }"></div>
<script id="list-template" type="text/html">
<select data-bind="options: $root.options,
optionsText: 'value',
value: $root.selectedOption"></select>
<p>All items with the same key:</p>
<ul data-bind="foreach: $data">
<li data-bind="text: value"></li>
</ul>
</script>
<hr> SelectedOption: <strong data-bind="text: ko.toJSON($root.selectedOption)"></strong>
相关文章:
- 重置为下拉菜单中的未绑定选项
- 在dojo中将数据从一个选项卡绑定到另一个选项卡(打开选项卡?)
- Knockout js 条件选项绑定
- 为什么我的淘汰选项绑定不起作用
- 挖空选项对象绑定
- 选择/选项 ng-model 未绑定 ng-selected
- 如何刷新'选项'ko多选组件中的绑定
- Magento网站-按选项排序:上下箭头与排序数据绑定,只需删除上下箭头即可
- 如何在HTML中用两个预定义的值绑定选择选项,以在mongodb中插入数据
- 如何使用淘汰选项绑定从select中删除值
- 如何设置<选项>在用数据绑定填充的选择中='选项:[..]'
- 对没有数据绑定“选项”或“标题”的选择列表进行挖空验证
- 在选择框中从任意 JavaScript 对象绑定选项值和选项文本
- 如何使用 Angular.JS 在下拉列表中绑定选项的值和文本
- 当通过AJAX绑定选项时,是否可以将select元素的默认值传递给Knockout
- Ember.使用未绑定选项列表进行选择
- AngularJS绑定选项的性能
- 双向绑定选项
- 如何在Knockout中的数据绑定选项中自动选择用户状态
- 设置默认数据绑定选项的值