1

在尝试使用 durandal 的稍微复杂的构图场景时，我遇到了一个奇怪的问题。

我想动态组合表格每个单元格的内容。例如，我有以下文件：

Welcome.html => 包含动态呈现 html 表格的代码

<table>
    <thead>
        <tr data-bind="foreach: columnNames">
            <th><span data-bind="text: $data"></span>

            </th>
        </tr>
    </thead>
    <tbody data-bind="foreach: items">
        <tr data-bind="foreach: $parent.columnNames">
            <!-- <td data-bind="text: $parent[$data]"></td>-->
            <td data-bind="compose: { model: $root.activeView($index), activationData: $root.activationData($parentContext.$index), cacheViews: false }"></td>
        </tr>
    </tbody>
</table>

Welcome.js => 对应的视图模型

define(['knockout'], function (ko) {
var ctor = function () {
    var m_items = [{
        'Name': 'John',
        'Age': 25
    }, {
        'Name': 'Morgan',
        'Age': 26
    }];
    this.items = ko.observableArray(m_items);
    this.columnNames = ko.computed(function () {
        if (m_items.length === 0)
            return [];
        var props = [];
        var obj = m_items[0];
        for (var name in obj)
            props.push(name);
        return props;
    });

    this.activeView = function (index) {
        if (index() == 0)
            return "viewmodels/cell-1";
        else
            return "viewmodels/cell-2";
    };

    this.activationData = function (rowIndex) {
        return m_items[rowIndex()];
    }

};

return ctor;
});

cell-1.html => 显示第一列的视图

<span data-bind="text : Name"></span>

cell-1.js => cell-1 对应的视图模型

define(['knockout'], function (ko) {
var model = null;
var name = ko.observable();
var ctr = function () {
    this.Name = name;
    this.activate = function (modelObject) {
        model = modelObject;
        name(model.Name);
    };
};
return ctr;
});

同样是 cell-2 的视图和视图模型。

我面临的问题是，即使组合工作正常并且为 cell-1.js 调用了两次激活函数（每行一次），可观察的值name将包含前一个值。（即值将是“约翰”，当它试图将其设置为“摩根”时）。这很奇怪，因为 cell-1.js 返回了一个构造函数，因此 durandal 应该创建了视图模型的另一个实例。总而言之，这导致两行都包含相同的数据。

我确信我必须调整一些小问题才能让它工作，但我所有的努力都是徒劳的。

任何帮助将不胜感激。

4

1 回答 1

2

model问题是您已经name在cell-1.js.

因此，即使您返回一个被调用两次的构造函数，模块本身也只加载一次，因此您的视图模型共享相同的状态。

要解决它，您只需将变量移动到ctr：

define(['knockout'], function (ko) {

var ctr = function () {
    var model = null;
    var name = ko.observable();

    this.Name = name;
    this.activate = function (modelObject) {
        model = modelObject;
        name(model.Name);
    };
};
return ctr;
});
于 2014-01-09T06:22:56.890 回答