0
我有一个来自服务器的ajax数据和这个数据我应该生成选择框。 请看this code：淘汰赛 - 如何使用选项和foreach绑定在一起
var dataCameFromServer = {
foo: "1",
bar: "sag",
results: [
{
slectedBoxID: null,
selectBoxOptions: [
{
id: 1,
name: "mosi"
},
{
id: 2,
name: "azi"
},
{
id: 3,
name: "mom"
},
{
id: 4,
name: "dad"
}
]
},
{
slectedBoxID: 2,
selectBoxOptions: [
{
id: 1,
name: "tehran"
},
{
id: 2,
name: "masal"
},
{
id: 3,
name: "gilan"
},
{
id: 4,
name: "rasht"
}
]
},
{
slectedBoxID: 1,
selectBoxOptions: [
{
id: 1,
name: "adidas"
},
{
id: 2,
name: "nike"
},
{
id: 3,
name: "rebook"
},
{
id: 4,
name: "puma"
}
]
}
]
};
function selectViewModel() {
var self = this;
this.data = ko.observable(dataCameFromServer);
this.sbValue = ko.observableArray();
ko.computed(function() {
$.each(self.data().results, function(i,v) {
self.sbValue.push(v.slectedBoxID);
});
});
ko.computed(function(){
console.log(self.sbValue());
});
}
ko.applyBindings(new selectViewModel(), $("#wrapper")[0]);<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="wrapepr">
<!-- ko with: data -->
<!-- ko foreach : results -->
<select data-bind="options:selectBoxOptions,optionsText: 'name',optionsValue: 'id',value: $root.sbValue()[$index],optionsCaption: 'Choose...'"></select>
<!-- /ko -->
<!-- /ko -->
</div>我默认的是在slectedBoxID如果我的选择框，然后改变了相应slectedBoxID变化值的选项中选择想要我的选择框。
有没有什么建议可以做到这一点？
p.s：我不知道服务器有多少结果，它不只是这三个结果！