源数组更新后，Knockout下拉列表未更新

Question

我有一个下拉列表，它是从视图模型的可观察数组中填充的。有一个按钮是绑定到函数的数据，该函数从数组中删除一个元素。单击该按钮时，数组会移动以移除元素。但是，下拉列表不会反映更改，并且下拉列表值也不会更改。

html:

<!-- ko if: t -->
<select data-bind="template: { name: 'selectTemplateType', data: t }, value: selectedId"></select>
<!-- /ko -->
<!-- ko ifnot: t -->
<select>
<option>No templates loaded</option>
</select>
<!-- /ko -->
<div data-bind='text: selectedId'></div>
<script type="text/html" id="selectTemplateType">
<!-- ko foreach: groups -->
<optgroup data-bind="attr: { 'label': name }, foreach: types">
<option data-bind="value: id, text: name"></option>
</optgroup>
<!-- /ko -->
</script>
<div>
<button type="button" data-bind="click: remove">Remove First</button>
</div>

javascript:

var t = {
groups: [
{ name: 'a', types: [{id: 1, name: 't1'}] },
{ name: 'b', types: [{id: 102, name: 't2'}, {id: 103, name: 't3'}] },
{ name: 'c', types: [{id: 5, name: 'x'}] }
]
}
var ViewModel = function() {
var me = this;
let temp = {
groups: [
{ name: 'a', types: [{id: 1, name: 't1'}] },
{ name: 'b', types: [{id: 102, name: 't2'}, {id: 103, name: 't3'}] },
{ name: 'c', types: [{id: 5, name: 'x'}] }
]
};
me.t= ko.observable(ko.mapping.fromJS(temp));
me.selectedId= ko.observable(103);

me.remove = function(){
me.t().groups().shift();
}
};
var vm = new ViewModel();
ko.applyBindings(vm);

你可以在这里看到混乱的情况：http://jsfiddle.net/Eves/2kw9y37t/24/

我想我错过了什么愚蠢的东西。有人知道我缺了什么吗？

Answer 1

如果您查看Observable Arrays中的文档，您可以阅读以下内容：

pop，push，shift，unshift，reverse，sort，splice

所有这些函数都相当于在底层数组上运行本机JavaScript数组函数，然后通知侦听器更改

当你这样做时：

me.t().groups()

您正在底层阵列上操作，然后：

me.t().groups().shift();

它工作正常，但您不会将更改通知监听器，html中也不会发生任何更改。

你可以这样写：

me.t().groups.shift();

即在可观测数组中调用Knockout提供的shift()方法。请注意，groups没有括号。