knockout.js - 如何在 knockout js 中将值从一个 View 模型传递到另一个 View 模型？

Question

我有两个 View 模型，我想将值从一个 View 模型传递到另一个 View 模型。我有两个 View 模型和两个 div 我想在单击 div 1 中存在的按钮时显示另一个 div。

这里是html代码

   <div id="container1">
        <ul >
            <li >Container1 item</li>
            <!-- ko foreach: myItems -->
            <li>Item <span data-bind="text: $data"></span></li>
            <!-- /ko -->
        </ul>
        <button data-bind="click:showDiv">show another div</button>
    </div>
     <div id="container2" data-bind="visible:show">
        <ul>
            <li >Container2 item</li>
            <!-- ko foreach: myItems -->
                <li>Item <span data-bind="text: $data"></span></li>
            <!-- /ko -->
        </ul>
    </div> 

这是脚本

function Container1ViewModel()
{
    var self = this;
    self.myItems = ko.observableArray();
    self.myItems.push("ABC");
    self.myItems.push("CDE");

} 
function Container2ViewModel() {
    var self = this;
    self.myItems = ko.observableArray();
    self.myItems.push("XYZ");
    self.myItems.push("PQR");

}


var container1VM;
var container2VM;

$(document).ready(function() {

    if ($.isEmptyObject(container1VM)) {
        container1VM = new Container1ViewModel();
        ko.applyBindings(container1VM, document.getElementById("container1"));
    }

    if ($.isEmptyObject(container2VM)) {
        container2VM = new Container2ViewModel();
        ko.applyBindings(container2VM, document.getElementById("container2"));
    }
});

我该怎么做？

Answer 1

您可以使用伟大的@RyanNiemeyer 提供的 KO.postbox

我在两个 View 模型中各引入了一个变量

在 viewmodel 1 中将发布(喊出)所做的更改:

self.isVisible = ko.observable(false).publishOn("showDiv");

在 viewmodel 2 中，它将列出来自 viewmodel 1 的更改

self.isVisible = ko.observable(false).subscribeTo("showDiv");

然后我在第一个 viewModel 中创建了一个点击方法来切换 Show Div Action (可见:true/false)

self.showDiv = function(){
     if(self.isVisible())
         self.isVisible(false);
    else
        self.isVisible(true);
}

将现有标记的可见绑定(bind)更改为:

<div id="container2" data-bind="visible:isVisible">

它现在将在第一个 View 模型中所做的更改发布到第二个 View 模型。这称为发布-订阅机制。阅读更多:https://github.com/rniemeyer/knockout-postbox

在这里 fiddle :http://jsfiddle.net/rahulrulez/0454h205/1/