Question

我有一个带有文本框输入的页面。我在此文本框中添加元素并使用Knockout obervable数组显示内容。现在我需要添加另一个文本框，创建另一个集合并显示它。我是否需要创建另一个可观察数组（以及另一种向数组添加元素的方法）？有什么办法可以重用代码吗？如果没有，我可能必须创建与我需要显示的集合一样多的可观察数组。

 dataStore: ko.observableArray([]),        
        nameToAdd: ko.observable(''),
        add: function () {
            var val = this.nameToAdd();
            var pos = this.dataStore.indexOf(val.trim());
            if (pos === - 1 && this.nameToAdd() .length > 0 && this.nameToAdd() .trim() != '') {
                this.dataStore.push(val);
                this.nameToAdd('');
                $('#txtSetInput') .focus();
            }

http://jsfiddle.net/mayurarora/ZtL8t/3/

Answer 1

重用逻辑来自使用构造函数来表示视图模型，而不仅仅是纯JavaScript对象。浏览KnockoutJS tutorials，如果时间不够，请至少执行the one on collections。

对于您的方案，您可以遵循这些方针：

var ItemViewModel = function() {
    var self = this;
    self.name = ko.observable("");

};

var MainViewModel = function() {
    var self = this;
    self.dataStore = ko.observableArray([new ItemViewModel()]);    

    self.addItem = function(item) {
        self.dataStore.push(new ItemViewModel());
    };

    self.clear = function(item) {
        self.dataStore.remove(item);
    };
};

$(function () {
    var viewModel = new MainViewModel();
    ko.applyBindings(viewModel);
});

另见this updated fiddle。

在不同的HTML元素上重用Knockout Observable

1 个答案: