Knockout.js 如何在knockout js中将值从一个视图模型传递到另一个视图模型？

我有两个视图模型，我想将值从一个视图模型传递到另一个视图模型。我有两个viewmodels和两个div，我想在单击按钮时显示另一个div，它出现在div1中

下面是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> 

---

我怎么做

rjdmello已经把你指给我了。放大提供（除其他外）发布/订阅机制。Pub/sub是促进松散耦合的模块之间通信的好方法。一个模块订阅一个主题，而任何其他模块都可以发布包含该主题的消息（以及您想要发送的任何数据）。主题发布后，将通知所有订阅者

在这种情况下，一些代码会放大：

Container1ViewModel.prototype.showDiv = function (event) {
    amplify.publish('show-div', { clickedButton: event.target });
}

function Container2ViewModel() {
    var onShowDiv = function (data) {
        if ($(data.clickedButton).hasClass('.enabled')) {
            // Show me teh div!!
            this.myItems.push("ABC");
        }
    };
    this.myItems = ko.observableArray();
    this.myItems.push("XYZ");
    this.myItems.push("PQR");

    amplify.subscribe('show-div', this, onShowDiv, 1);
}

使用pub/sub保持模块松散耦合通常是一种很好的做法（尽管您不应该过度使用它，因为跟踪模块如何协作会变得更加困难）

当我们进行良好实践时，不要使用

self=this

，而是使用

Function.prototype.bind

。

---

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

我在两个viewmodels中分别引入了一个变量

在viewmodel 1中，一旦做出更改，将发布（呼喊）更改：

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

在viewmodel 2中，将列出对viewmodel 1的更改

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

然后，我在FirstViewModel中创建了一个单击方法来切换ShowDiv操作（可见：true/false）

将现有标记的可见绑定更改为：

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

现在，它将在第一个viewmodel中所做的更改发布到第二个viewmodel。这称为发布-订阅机制。阅读更多关于：

---

在这里拉小提琴：

为此，您可以按照以下步骤操作

视图模型

function vm1(parent){
    var self = this
    self.parent = ko.observable(parent)
    .
    .
    .

    self.myfunction(data){
        self.parent().pageParameters(data)
    }
}
function vm2(parent){
    var self = this
    self.parent = ko.observable(parent)
    .
    .
    .

    self.myotherfunction(){
        var othervmdata = self.parent().pageParameters()
        .
        .
    }
}

function vm(){
    var self = this

    self.vm1 = ko.observable();
    self.vm2 = ko.observable();

    self.pageParameters = ko.observable

    self.loadData = function(){
        self.vm1(new vm1(this))
        self.vm2(new vm1(this))
    }
}

看法

<div data-bind="with:vm1">
.
.
.
</div>
<div data-bind="with:vm2">
.
.
.
</div>  

.
.
.
.
.
.

这样，当您绑定

myfunction

以单击“绑定父模型”时，将有您想要传递的数据，然后在另一个视图模型上，您可以访问父属性

pageParameters

---

有关更多详细信息，请参阅帖子。

使用“显示另一个div”是什么意思？你能详细解释一下吗？这里我和你分享我的小提琴。我有分支机构，每个分支机构都有分支机构。所以我想点击showbranches我可以隐藏showbrancharea的div并显示Branchs div，还有一个取消选项，这样在取消时我们可以返回到branch区域，即隐藏Branchs并显示BranchArea我无法为每个字段执行此操作，但如果我不在div中使用它，我需要在单击每个字段时使用它。我甚至使用$root.brancharea，但它不起作用。还有其他方法吗？你能发布JSFIDLE吗？这是js FIDLE现在我可以显示和隐藏div，但是当我尝试使用cancelField取消此操作时，它不起作用了。我想再问一件事，如果我想在单击showfield时将branchid从brancharea viewmodel发送到BranchViewModel。我怎么能做到这一点呢。

cancelField

应该怎么做？嗨Raheel，这里是js fiddle jsfiddle.net/sohimohit/43zkoszu/04现在我可以通过单击showfield来显示和隐藏div，但是当我尝试使用cancelField取消此操作时，它不起作用了。我想问一件事，如果我想在单击showfield时将branchid从brancharea viewmodel发送到BranchViewModel。我怎样才能做到这一点。

function vm1(parent){
    var self = this
    self.parent = ko.observable(parent)
    .
    .
    .

    self.myfunction(data){
        self.parent().pageParameters(data)
    }
}
function vm2(parent){
    var self = this
    self.parent = ko.observable(parent)
    .
    .
    .

    self.myotherfunction(){
        var othervmdata = self.parent().pageParameters()
        .
        .
    }
}

function vm(){
    var self = this

    self.vm1 = ko.observable();
    self.vm2 = ko.observable();

    self.pageParameters = ko.observable

    self.loadData = function(){
        self.vm1(new vm1(this))
        self.vm2(new vm1(this))
    }
}

<div data-bind="with:vm1">
.
.
.
</div>
<div data-bind="with:vm2">
.
.
.
</div>