当可观察数组更新时,查看模型不更新
问题描述:
我遇到类似于此问题的问题。 KnockoutJS - populating second combobox based on value selected in first combobox,而不是使用选择元素的组合框。我有一个主选择元素,当选择一个选项时,会向第二个选择选项的模型发送一个值,并填充可观察数组。我的问题是,选择字段中没有显示选项。我已经写了控制台,数组确实有对象,模型似乎没有更新。当可观察数组更新时,查看模型不更新
这里是我的jsfiddle https://jsfiddle.net/gauldivic/bjsswdqu/37/
HTML:
<select data-bind="foreach: ts.groups, value: ts.selectedOption">
<option value ="-1"></option>
<optgroup data-bind="attr: {label: label}, foreach: children">
<option data-bind="text: label, option: value()"></option>
</optgroup>
</select>
<select data-bind="foreach: ts2.groups2,value:ts2.selectedOption">
<option value ="-1"></option>
<optgroup data-bind="attr: {label: label}, foreach: children">
<option data-bind="text: label,option: value()"></option>
</optgroup>
</select>
<hr />
<div data-bind="text: ts.specialProperty"></div>
MODEL:
ko.bindingHandlers.option = {
update: function(element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
ko.selectExtensions.writeValue(element, value);
}
};
var mainView = function()
{
this.ts = new testSelect("");
this.ts2 = new testSelect2();
}
function testGroup(label, children) {
this.label = ko.observable(label);
this.children = ko.observableArray(children);
}
function testOption(label, property) {
this.label = ko.observable(label);
this.value = ko.observable(property);
}
function testGroup2(label, children) {
this.label = ko.observable(label);
this.children = ko.observableArray(children);
}
function testOption2(label, property) {
this.label = ko.observable(label);
this.value = ko.observable(property);
}
function testSelect2(content,selectedValue)
{
//alert(content);
this.groups2 = ko.observableArray();
if(content == 1)
{
this.groups2.push(new testGroup("Letters",[new testOption("C","3"),new testOption("D","4")]));
console.debug(groups2());
}
else if(content == 2)
{
this.groups2.push(new testGroup2("Letters",[new testOption2("E","5"),new testOption2("F","6")]));
}
this.selectedOption = ko.observable(selectedValue);
this.specialProperty = ko.computed(function(){
var selected = this.selectedOption();
return selected ? selected : 'unknown';
}, this);
}
var testSelect = function(selectedValue)
{
this.groups = ko.observableArray();
this.groups.push(new testGroup("Letters",[new testOption("A","1"),new testOption("B","2")]));
this.selectedOption = ko.observable(selectedValue);
this.specialProperty = ko.computed(function(){
var selected = this.selectedOption();
return selected ? selected : 'unknown';
}, this);
this.selectedOption.subscribe(function(newValue)
{
if(newValue != -1)
{
alert(newValue);
testSelect2(newValue);
}
});
};
ko.applyBindings(new mainView());
答
我能弄明白。感谢@Roy j我调用testSelect2(newValue)的方式是替换整个数组,而不是将数组添加到数组中。 https://jsfiddle.net/gauldivic/L284Lkdk/3/
MODEL:
ko.bindingHandlers.option = {
update: function(element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
ko.selectExtensions.writeValue(element, value);
}
};
var mainView = function()
{
this.ts = new testSelect("");
this.ts2 = new testSelect2();
}
function testGroup(label, children) {
this.label = ko.observable(label);
this.children = ko.observableArray(children);
}
function testOption(label, property) {
this.label = ko.observable(label);
this.value = ko.observable(property);
}
function testGroup2(label, children) {
this.label = ko.observable(label);
this.children = ko.observableArray(children);
}
function testOption2(label, property) {
this.label = ko.observable(label);
this.value = ko.observable(property);
}
function testSelect2(content,selectedValue)
{
//alert(content);
this.groups2 = ko.observableArray([]);
this.groups2.push(new testGroup("Letters", [new testOption("X","42")]));
this.selectedOption = ko.observable(selectedValue);
this.specialProperty = ko.computed(function(){
var selected = this.selectedOption();
return selected ? selected : 'unknown';
}, this);
};
var testSelect = function(selectedValue)
{
this.groups = ko.observableArray([]);
this.groups.push(new testGroup("Letters",[new testOption("A","1"),new testOption("B","2")]));
this.selectedOption = ko.observable(selectedValue);
this.specialProperty = ko.computed(function(){
var selected = this.selectedOption();
return selected ? selected : 'unknown';
}, this);
this.selectedOption.subscribe(function(newValue)
{
if(newValue != -1)
{
//alert(newValue);
//console.log(mv.ts2.groups2.push(new testGroup("Letters",[new testOption("C","3"),new testOption("D","4")])));
//mainView.ts2.getData(newValue);
if(newValue == 1)
{
mv.ts2.groups2.removeAll();
mv.ts2.groups2.push(new testGroup("Letters",[new testOption("C","3"),new testOption("D","4")]));
//console.debug(groups2());
}
else if(newValue == 2)
{
mv.ts2.groups2.removeAll();
mv.ts2.groups2.push(new testGroup2("Letters",[new testOption2("E","5"),new testOption2("F","6")]));
};
}
else
{
mv.ts2.groups2.removeAll();
}
});
};
var mv = new mainView();
ko.applyBindings(mv);
当你调用`testSelect2(NEWVALUE)`
,要更换'groups2' observableArray,不仅改变其内容。 –
@RoyJ谢谢你。我能弄明白。 –