如何在敲除JS中的两个视图模型之间交换值 [英] How to exchange value between two viewmodels in knockout js

问题描述

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

Hi i have two view models and i want to transfer a value between them. here is js fiddle

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

我希望当用户单击显示另一个div"按钮时，相应的项目名称应显示在另一个div上.表示我想将一个viewmodel值显示为另一个. 其次，当用户单击显示另一个div"按钮时，另一个div出现，我想要取消选项，以便用户可以返回到firstdiv.我怎么能做到这一点.

i want when a user click on show another div button then corresponding item name should be display on another div . means i want to show one viewmodel value into another. secondly when a user click on show another div button another div appears i want an option of cancel so that user can go back to firstdiv. how can i achieve this.

推荐答案

您可以为其使用全局变量container1VM和container2VM.
例如.

You can use global variables container1VM and container2VM for it.
E.g. call of

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

将使可见容器-不可见.

will make visible container - invisible.

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"));

这篇关于如何在敲除JS中的两个视图模型之间交换值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！