knockout.js - 需要有关如何使用 knockout.js 创建二维矩阵的说明

Question

我是 knockout.js 的新手。我正在尝试创建一个类似于 HTML 结构的矩阵。我正在尝试从头开始。用户将有一个添加行按钮，这将创建行。我可以添加多行。现在我正在尝试添加一列。该列应该基本上复制现有表并制作副本并使其出现在下一列中。

我已经达到了这一点。链接到jsfiddle

我是 HTML CODE 添加代码以便于阅读。

<div class='liveExample'> 

<div data-bind='simpleGrid: gridViewModel'> </div>

<button data-bind='click: addRowItem'>
    Add Row
</button>
<button data-bind='click: addColItem'>
    Add Col
</button>      

这是带有 knockout.js 函数的 Java 脚本代码

var initialData = [
    { name: "" }
];



var PagedGridModel = function(items) {
    this.items = ko.observableArray(items);


this.addRowItem = function() {
    this.items.push({ name: "New Row" });
};

this.gridViewModel = new ko.simpleGrid.viewModel({
    data: this.items,
    columns: [
        { headerText: "", rowText: "name"}
    ],
});

};
ko.applyBindings(new PagedGridModel(initialData));

Answer 1

simplegrid 视图模型中的 columns 数组必须是 observableArray 否则模型将不知道它已更改。与您对数据所做的类似，您需要使列引用 observableArray。

这是更新的视图模型：

var PagedGridModel = function(items) {
    var self = this;

    self.items = ko.observableArray(items);
    self.columns = ko.observableArray([
            { headerText: "", rowText: "name"}
        ]);

    self.addRowItem = function() {
        self.items.push({ name: "New Row" });
    };

    self.addColItem = function() {
        self.columns.push({ name: "New Column" });
    };

    self.gridViewModel = new ko.simpleGrid.viewModel({
        data: self.items,
        columns: self.columns
    });

};