2

我正在使用 DurandalJs 2.0 和 KnockoutJs。我有两个 HTML 页面，add.html和show.html及其 JS 文件。我想在一个index.html页面中将两个页面显示为组合。左边是show.html，显示添加的记录，右边是add.html，允许用户添加记录。

我的问题是；当用户添加新记录时， show.html 页面应立即显示或附加记录。当我添加一条记录时，它会在 repository.js 中更新，但如何刷新只有 show.html 才能读取新记录。我尝试了 router.navigate("#/client/index") 但它不起作用。

<div>
<div id="global">
    <!-- ko compose: {model: 'viewmodels/client/show', view:'views/client/show'} -->
    <!-- /ko-->
    <div id="main" class="container">

        <!--ko compose: {model: router.activeItem, 
    afterCompose: router.afterCompose,
    transition: 'entrance'} -->
        <!-- /ko-->

    </div>
    <div id="push">
        <!-- ko compose: {model: 'viewmodels/client/add', view:'views/client/add'} -->
        <!-- /ko-->
    </div>
</div>

4

1 回答 1

3

我建议您为此使用应用程序消息传递。Durandal 提供了一种发布者/订阅者机制来在应用程序的不同模块之间进行通信。

要使用此功能，您需要在两个视图模型中使用 Durandal 的应用程序模块：

 var app = require('durandal/app');

在add视图模型中，您可以添加代码以向订阅者发送带有新客户端的消息，在这种情况下show视图模型：

addClient: function(client){
    app.trigger('client:add', client);
}

字符串'client:add'是事件的标识符，下面的参数是要发送给订阅者的消息。在您的场景中，您希望发送新客户端。

您的show视图模型可以在activate方法中包含以下代码：

activate: function(){
    var self = this;
    subscription = app.on('client:add').then(function (client) {
        self.clients.push(client); //add client into a ko.observableArray?
    };
}

该on方法需要事件的标识符并返回一个promise，该promise 可用于在事件触发时执行代码。请注意，该方法返回一个订阅对象，我们以后可以使用它来取消订阅。

也许当这个视图与 UI 分离时，您需要取消订阅：

 subscription.off();

例如，您还可以使用其他方法observableArray，例如在视图模型之间共享相同的实例。然而，我认为应用程序消息传递是一种很好的方式来沟通和解耦应用程序的各个部分。

于 2013-10-30T11:08:24.633 回答