admin管理员组文章数量:1323157
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 ?
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 ?
Share asked Aug 14, 2014 at 11:01 user2142786user2142786 1,48210 gold badges43 silver badges79 bronze badges 2- 1 use amplifyjs. – rjdmello Commented Aug 14, 2014 at 11:06
- What do you mean by show Another div? can you please elaborate? – Rahul Commented Aug 14, 2014 at 14:31
3 Answers
Reset to default 6You 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./rniemeyer/knockout-postbox
Fiddle here : http://jsfiddle/rahulrulez/0454h205/1/
rjdmello already pointed you to AmplifyJS. Amplify offers (amongst other things) a publish/subscribe mechanism. Pub/sub is a good way to facilitate munication between modules that are loosely coupled. One module subscribes to a topic, and any other module can publish a message with that topic (and any data you'd like to send along). Once a topic is published, all subscribers will be notified.
Some code demonstrating Amplify in this case:
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);
}
Using pub/sub to keep modules loosely coupled is generally very good practise (although you shouldn't overdo it because it will bee harder to track how modules cooperate).
And while we are on the practise of good practise, don't use self = this
, use Function.prototype.bind
instead.
http://www.smashingmagazine./2014/01/23/understanding-javascript-function-prototype-bind/
For this you can follow these
Viewmodels
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))
}
}
View
<div data-bind="with:vm1">
.
.
.
</div>
<div data-bind="with:vm2">
.
.
.
</div>
This way when you bind myfunction
to click binding parent model will have the data you want to pass then on the other view model you can access parent property pageParameters
.
For more details see my post.
本文标签: knockoutjsHow to pass value from one view model to another viewmodel in knockout jsStack Overflow
版权声明:本文标题:knockout.js - How to pass value from one view model to another viewmodel in knockout js? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742141405a2422595.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论