2

我正在尝试利用淘汰赛来创建一个可编辑的表格。我有一个 JSON 对象，其中包含标题和表格数据的集合。该表需要使用任何对象构建。它将遍历 JSON 对象以创建 ko.observableArray 和 ko.observables 来填充它。我已经能够做到这一点。我的问题是 ko.observables 没有被数据绑定。

这是我的 JavaScript 的一个片段：

EditableTableVM.prototype.load = function() {
    this.headings = this.buildKO_ObservableArray(new Heading(), this.dataRepo.HEADINGS);
    this.listings = this.buildKO_ObservableArray(new Listing(), this.dataRepo.LISTINGS);
}

/*
 * Dynamically creates a ko.observableArray from a JS array
 * Params: JSClass - new instance of a class
 * Params: baseArray - array of objects to create the observable array
 * Returns: Observable arary of JS object with ko.observables
 */
EditableTableVM.prototype.buildKO_ObservableArray = function(JSClass, baseArray) {
    var newArray = ko.observableArray([]);

    for(var i = 0, j = baseArray.length; i < j; i++) {
        var baseObj = baseArray[i];

        //new class is the class with ko.observables properties
        var newClass = this.buildKO_Observable(JSClass, baseObj);
        newArray.push(newClass);
    }

    return newArray;
}

/*
 * Dynamically create ko.observable from properties in an object
 * Params: JSClass - new instance of a class
 * Params: jsObject - object to created observables with
 * Returns: JS object with ko.observables
 */
EditableTableVM.prototype.buildKO_Observable = function(JSClass, jsObj) {
    for (var key in jsObj) {
        if (jsObj.hasOwnProperty(key)) {
            JSClass[key] = ko.observable(jsObj[key]);
        }
    }

    return JSClass;
}

这是我的 Fiddle http://jsfiddle.net/breck421/YFNLX/，它的工作达到了我之前描述的程度。

我不确定我正在尝试做的事情是否可能，并且真的很感激另一组对此的看法。

谢谢，

约旦

4

3 回答 3

1

像这样的东西（小提琴）

Javascript：

var DynamicObservable = function(data) {
    for (var key in data) {
        this[key] = ko.observable(data[key]);
    }
};

var ViewModel = function(data) {
    var self = this;
    self.items = ko.observableArray(ko.utils.arrayMap(data, function(i) {
        return new DynamicObservable(i);
    }));
    self.columns = ko.observableArray();
    for (var key in data[0]) {
        self.columns.push(key);
    }
};

HTML

<table>
    <thead>
        <tr data-bind="foreach: columns">
            <th data-bind="text: $data"></th>
        </tr>
    </thead>
    <tbody data-bind="foreach: { data: items, as: 'item'}">
        <tr data-bind="foreach: $parent.columns">
            <td><input data-bind="value: item[$data]" /></td>
        </tr>
    </tbody>
</table>

如果您希望能够创建新对象，您绝对可以对此进行改进。只需存储“列”并使用它来初始化新类型，但使用空值。

请注意，检查hasOwnProperty是无用的。由于您的数据来自 JSON，因此它始终是正确的。

于 2013-06-13T21:34:34.380 回答
1

您遇到的问题是，当您将 JSON 映射到启用剔除的视图模型时，您没有正确处理带有数组的子项。您的映射不够深入。

如果您检查以下内容：

EditableTableVM.listings()[0].LISTING()[0];

您会看到该对象的属性只是值，而不是 ko.observables。

与其尝试从头开始构建此映射，我建议使用其中一个淘汰映射插件：此处的淘汰映射插件：https ://github.com/SteveSanderson/knockout.mapping及其文档：http:// /knockoutjs.com/documentation/plugins-mapping.html 或更新的 Knockout ViewModel 插件：http: //coderenaissance.github.io/knockout.viewmodel/

我已经用淘汰映射插件更新了你的小提琴：http: //jsfiddle.net/rrahlf/YFNLX/2/现在你的值绑定正确。

祝你好运！

于 2013-06-14T01:54:02.267 回答
1

看起来您想使用类似http://coderenaissance.github.io/knockout.viewmodel/的东西 

EditableTableVM.prototype.load = function () {
    this.headings = ko.viewmodel.fromModel(this.dataRepo.HEADINGS);
    this.listings = ko.viewmodel.fromModel(this.dataRepo.LISTINGS);
}

http://jsfiddle.net/mbest/YFNLX/3/

于 2013-06-14T02:47:05.630 回答