如何在淘汰赛 js 中将值从一个视图模型传递到另一个视图模型? [英] How to pass value from one view model to another viewmodel in knockout js?

问题描述

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

这里是html代码

 
<ul ><li >Container1 item</li><!-- ko foreach: myItems --><li>Item <span data-bind="text: $data"></span></li><!--/ko --><button data-bind="click:showDiv">显示另一个div</button>
<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 -->

这里是脚本

function Container1ViewModel(){var self = this;self.myItems = ko.observableArray();self.myItems.push("ABC");self.myItems.push("CDE");}函数 Container2ViewModel() {var self = this;self.myItems = ko.observableArray();self.myItems.push("XYZ");self.myItems.push("PQR");}var container1VM;var container2VM;$(document).ready(function() {如果 ($.isEmptyObject(container1VM)) {container1VM = new Container1ViewModel();ko.applyBindings(container1VM, document.getElementById("container1"));}如果 ($.isEmptyObject(container2VM)) {container2VM = 新的 Container2ViewModel();ko.applyBindings(container2VM, document.getElementById("container2"));}});

我该怎么做?

解决方案

您可以使用@RyanNiemeyer 的 KO.postbox

我在两个视图模型中都引入了一个变量

在视图模型 1 中，它将发布(喊出)所做的更改:

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

在视图模型 2 中，它将列出视图模型 1 的更改

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

然后我在第一个 viewModel 中创建了一个单击方法来切换 Show Div 动作(可见:真/假)

self.showDiv = function(){如果(self.isVisible())self.isVisible(false);别的self.isVisible(true);}

将可见绑定从现有标记更改为:

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

在这里小提琴:http://jsfiddle.net/rahulrulez/0454h205/1/

i have two view models and i want to pass value from one view model to another viewmodel. i have two viewmodels and two div i want to display another div on click of button which is present in div 1.

here is html code

   <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> 

and here is script

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

how can i do it ?

解决方案

You can make use of KO.postbox by the great @RyanNiemeyer

I introduced one variable in both the viewmodels each

In viewmodel 1 which will publish (shout) the changes once made :

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

in viewmodel 2 which will be listning to changes from viewmodel 1

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

Then I created one click method in first viewModel to toggle Show Div action (visible : true / false)

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

Changed visible binding from your existing markup to this :

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

It now publish changes made in first viewmodel to second viewmodel. This is called pub-sub mechanism. Read more on : https://github.com/rniemeyer/knockout-postbox

Fiddle here : http://jsfiddle.net/rahulrulez/0454h205/1/

这篇关于如何在淘汰赛 js 中将值从一个视图模型传递到另一个视图模型?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！