Question

我正在尝试使用knockoutjs创建一个股票跟踪应用程序。我有一系列可观察的产品，我需要用户能够添加n天来保存每天的库存数量。

这是我目前的代码：

// Class to represent a row in the product grid
    function product(title, category, day) {
        var self = this;
        self.title = title;
        self.category = category;
        self.day = ko.observableArray([day]);
    }

    // Class to represent a day column
    function day(day, total, cost) {
        var self = this;
        self.day = day;
        self.total = ko.observable(total);
        self.cost = ko.observable(cost);
    }

    var viewModel = {
        products: ko.observableArray([
            new product("Name", "Category", new day('2', 10, 50)),
        ]),
        addProduct: function(param){
            //console.log(param);
            this.products.push(new product("Name", "Category", new day('1', 10, 50)));
        },
        removeProduct: function(product) {
            this.products.remove(product);
        }
    };

这会正确显示数据，但现在我想创建一个允许用户在表格中添加另一天列的功能。

我不确定我在另一个可观察数组中使用可观察数组的方法是否正确，或者是否有更好的解决方案？如果这是正确的方法，我将如何构建一个函数来添加更多日期列？

TIA！

Answer 1

您可以根据需要深入嵌套observable。

我认为您尝试在每个产品对象中添加或删除日期对象。

您可以在产品对象上添加一个函数来添加日期对象。

 function product(title, category, day) {
        var self = this;
        self.title = title;
        self.category = category;
        self.day = ko.observableArray([day]);
        self.addNewDay = function(){ 
            self.day.push(new day());
        };
        self.removeDay = function(day){ 
            self.day.remove(day);
        };
    }

然后在UI中，当您绑定到第一个数组时，您可以将按钮单击绑定到addNewDay以添加天数，然后在每天绑定一个删除按钮。如下所示。

 <!-- ko foreach: product -->

 <button type="button" data-bind="click: addNewDay" class="button">Add Day</button>

  <!-- ko foreach: day -->

        <div class="row">
            <div class="small-1 large-1 column">
                <button type="button" data-bind="click: $parent.removeDay" class="button round tiny">Remove</button>
            </div>

您可以将逻辑添加到viewmodel而不是产品，但是您可能需要使用$ root。并使用它，以确保删除和添加正确的产品和正确的一天。 checkout http://knockoutjs.com/documentation/binding-context.html以查看向上移动对象图的不同上下文。

可观察数组中的可观察数组

1 个答案: