如何在淘汰赛js中的两个视图模型之间交换价值答案

【问题标题】：How to exchange value between two viewmodels in knockout js如何在淘汰赛js中的两个视图模型之间交换价值
【发布时间】：2014-08-19 06:03:19
【问题描述】：

您好，我有两个视图模型，我想在它们之间传递一个值。这是js小提琴

`http://jsfiddle.net/sohimohit/e84u8L85/`

我希望当用户单击显示另一个 div 按钮时，相应的项目名称应显示在另一个 div 上。意味着我想将一个视图模型值显示到另一个视图模型中。其次，当用户单击显示另一个 div 按钮时，会出现另一个 div，我想要一个取消选项，以便用户可以返回到 firstdiv。我怎样才能做到这一点。

【问题讨论】：

标签： javascript knockout.js knockout-postbox

【解决方案1】：

您可以使用全局变量container1VM 和container2VM。
例如。

的召唤

 container1VM.isVisible(!container1VM.isVisible());
 container2VM.isVisible(!container2VM.isVisible());

将使容器可见 - 不可见。

JSFiddle DEMO

代码：

HTML：

   <div id="container1">


       <div data-bind="visible: !isVisible()">
        <ul >
            <li >Container1 item</li>
            <!-- ko foreach: myItems -->
            <li>Item <span data-bind="text: $data"></span></li>
            <button data-bind="click:$root.showDiv">show another div</button>
            <!-- /ko -->
        </ul>

       </div>
    </div>
     <div id="container2" data-bind="visible:isVisible">
        <ul>
            <li >Container2 item</li>
            <!-- ko foreach: myItems -->
                <li>Item <span data-bind="text: $data"></span></li>
            <!-- /ko -->
        </ul>
         <button data-bind="click:$root.cancel">cancel</button> 
    </div>

Javascript：

function Container1ViewModel()
{
    var self = this;
    self.isVisible = ko.observable(false);
    self.showDiv = changeVisibility;
    self.myItems = ko.observableArray();
    self.myItems.push("ABC");
    self.myItems.push("CDE");

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

function changeVisibility()
{
   container1VM.isVisible(!container1VM.isVisible());
   container2VM.isVisible(!container2VM.isVisible());
}

var container1VM = new Container1ViewModel();;
var container2VM = new Container2ViewModel();;

ko.applyBindings(container1VM, document.getElementById("container1"));

ko.applyBindings(container2VM, document.getElementById("container2"));

【讨论】：

但是我如何将项目的值传递给第二个视图模型假设我点击在列表项 ABC 下方显示另一个 div 按钮以及如何将值 ABC 显示到第二个视图模型
@user2142786 以同样的方式。例如。 container2VM.myItems(container2VM.myItems().concat(container1VM.myItems())); 会将 VM2 中的所有项目添加到 VM1
它会将所有项目添加到 container2VM 中，但我想要单击 showAnotherDiv 的特定项目。像 ABC 然后 ABC 出现在第二个 Viewmodel 中。为此我必须在点击时使用 $root ??
@user2142786 你可以传递$data 作为参数。检查jsfiddle.net/wv02y4Lt
非常感谢 llya...它现在可以工作了...我是淘汰赛 js 的新手，对此不太了解...非常感谢您的帮助 :)

【解决方案2】：

还可以考虑使用出色的 Ryan Niemeyer 的 Knockout Postbox： https://github.com/rniemeyer/knockout-postbox

您可以使用 syncWith 来更新可观察的控制可见性。这样，两个视图模型就不需要相互了解，并且您不需要对视图模型的引用进行硬编码。

syncWith - syncWith(topic, [initializeWithLatestValue], [skipInitialPublish], [equalityComparer])

syncWith 函数告诉 observable 订阅和发布主题。这允许两个不同视图模型中的可观察对象彼此保持同步，而无需直接了解其对应对象。

//subscribe to and publish on a topic
this.value = ko.observable(value).syncWith("mytopic");

//subscribe to and publish on a topic and use the last published value to initialize the     observable
this.value = ko.observable().syncWith("mytopic", true);

//subscribe to and publish on a topic, but do not publish out the observable's value initially
this.value = ko.observable(value).syncWith("mytopic", false, true);

//subscribe to and publish on a topic, but only publish when the comparer function returns false
var comparer = function(newValue, oldValue) {
    return newValue < oldValue;
};

this.value = ko.observable(value).syncWith("mytopic", false, false, comparer);

【讨论】：