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

Question

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

到此为止。 Link 至 jsfiddle

我是HTMLCODE 添加代码方便阅读

<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 视图模型中的列数组需要是一个 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
    });

};

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

Need directions on how to create a two dimensional matrix using knockout.js

knockout.js

knockout-3.0