1

所以我正在使用 KnockoutJS 处理多个视图模型，如下所示：

function firstViewModel() {
    var self = this;
    self.dataArray = ko.observableArray([
        { title: "title1", theData: "data1" },
        { title: "title2", theData: "data2" },
        { title: "title3", theData: "data3" },
    ]);
};

function secondViewModel() {
    var self = this;
    self.addData = function() {
        firstViewModel.dataArray.push({ title: "newTitle", theData: "newData" });
        // trying to trigger dataArray in firstViewModel, doesn't work
    }
};

ko.applyBindings(new firstViewModel(), document.getElementById('first'));
ko.applyBindings(new secondViewModel(), document.getElementById('second'));

然后是这样的：

<div id="first" data-bind="with: dataArray">
    <ul data-bind="foreach: $data">
        <li data-bind="text: theData"></li>
    </ul>
</div>
<div id="second">
    <button data-bind="click: addData">add</button>
</div>

它的结构是这样的原因是因为我有一个第三视图模型，并且元素在 DOM 中重叠。我也不知道如何让它工作。

有没有办法将结构和引用 firstViewModel 保留在 secondViewModel 中？firstViewModel.theData.push("newData"); 显然不起作用，但我想我会把它包括在内以进一步阐明我想要做什么。

我是 KO 的新手——如果这是一个愚蠢的问题，我很抱歉。

编辑：看起来我明白了！

如果我从 firstViewModel 中删除“自我”，它会起作用......

dataArray = ko.observableArray([
    { title: "title1", theData: "data1" },
    { title: "title2", theData: "data2" }
]);

然后

self.addData = function() {
    dataArray.push({ title: "newTitle", theData: "newData" });
}

我还不知道删除“自我”是否会产生后果，但到目前为止它正在发挥作用。

4

2 回答 2

1

就个人而言，我更喜欢让我的模型解耦，并使用发布/订阅模式让它们相互交谈。查看我对带有 knockoutJS的变量依赖项的回答

此外，如果你确实想走这条路，你也可以看看淘汰赛邮箱来完成同样的事情。

于 2013-03-08T09:02:05.727 回答
0

您可以传递第一个视图模型的引用：

function firstViewModel() {
    var self = this;
    self.dataArray = ko.observableArray([
        { title: "title1", theData: "data1" },
        { title: "title2", theData: "data2" },
        { title: "title3", theData: "data3" },
    ]);
};

function secondViewModel(firstViewModel) {
    var self = this;
    self.addData = function() {
        firstViewModel.dataArray.push({ title: "newTitle", theData: "newData" }); // doesn't work
    }
};

var firstVm = new firstViewModel();
var secondVm = new secondViewModel(firstVm);
ko.applyBindings(firstVm, document.getElementById('first'));
ko.applyBindings(secondVm, document.getElementById('second'));
于 2013-03-07T21:30:54.390 回答