在knockoutJS中绑定到可观察数组的问题

problems binding to observable array in knockoutJS

本文关键字:观察 数组 问题 knockoutJS 绑定      更新时间:2023-09-26

我目前有问题绑定数据到一个可观察数组在knockoutJS。我要做的是根据用户从选择框中的选择显示新值。

小提琴可在http://jsfiddle.net/jwayne2978/k0coh1fz/3/

我的HTML如下所示:

<select data-bind="options: categories, 
    optionsText: 'name',
    optionsValue: 'id',
    value: selectedCategory,
    optionsCaption: 'Choose...',
    event: { change: categoryChanged }
    ">
<div data-bind="foreach: values">
    <div data-bind="text: name"></div>
</div>
<div data-bind="foreach: categories">
    <div data-bind="text: name"></div>
</div>

我的JavaScript代码如下所示:

var categories = [
    { "name" : "color", "id": "1" },
    { "name" : "names", "id": "2" }
];
var values0 = [ { "name" : "empty1" }, { "name" : "empty2" } ];
var values1 = [ { "name" : "white" }, { "name" : "black" } ];
var values2 = [ { "name" : "john" }, { "name" : "name" } ];
var Category = function(data) {
    this.name = ko.observable(data.name);
    this.id =  ko.observable(data.id);
};
var Value = function(data) {
    this.name = ko.observable(data.name);
}
var ViewModel = function(categories, values) {
    var self = this;
    self.categories = ko.observableArray(ko.utils.arrayMap(categories, function(category) {
        return new Category(category);
    }));
    self.selectedCategory = ko.observable();
    self.values = ko.observableArray(ko.utils.arrayMap(values, function(value) {
        return new Value(value);
    }));
    self.categoryChanged = function(obj, event) {
        if(self.selectedCategory()) {
            console.log(self.selectedCategory());
            if("1" == self.selectedCategory()) {
                //console.log(values1);
                self.values.push(new Value({"name":"test1"}));
            } else if("2" == self.selectedCategory()) {
                //console.log(values2);
                self.values.push(new Value({"name":"test2"}));
            }
        }
    };
};
var viewModel;
$(document).ready(function() { 
    viewModel = new ViewModel(categories, values0);
    ko.applyBindings(viewModel);
});

当一个类别被更改时,我真正想做的是这样的事情。

self.values.removeAll();
for(var v in values1) {
 self.values.push(new Value(v));
}

但是这不起作用,所以我只需要将一个新值推入可观察数组。

此外,我对valuescategories的div的迭代没有显示,我不确定为什么。

知道我做错了什么吗?

您的<select>元素缺少关闭标记并在视图中进一步引起问题。

<select data-bind="options: categories, 
    optionsText: 'name',
    optionsValue: 'id',
    value: selectedCategory,
    optionsCaption: 'Choose...',
    event: { change: categoryChanged }"></select>

更新小提琴:http://jsfiddle.net/ragnarok56/69q8xmrp/