Как обменять значение между двумя моделями представления в нокауте JS
Привет у меня есть две модели просмотра, и я хочу передать значение между ними. вот JS Fiddle
`http://jsfiddle.net/sohimohit/e84u8L85/`
Я хочу, чтобы когда пользователь нажимал на кнопку "Показать еще один элемент div", соответствующее имя элемента должно отображаться на другом элементе div. означает, что я хочу показать одно значение модели представления в другое. во-вторых, когда пользователь нажимает на кнопку "Показать еще один div", появляется еще один div, я хочу отменить его, чтобы пользователь мог вернуться в firstdiv. Как я могу достичь этого.
2 ответа
Вы можете использовать глобальные переменные container1VM
а также container2VM
для этого.
Например, зов
container1VM.isVisible(!container1VM.isVisible());
container2VM.isVisible(!container2VM.isVisible());
сделает видимый контейнер - невидимым.
Код:
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"));
Также подумайте об использовании Knockout Postbox от превосходного Райана Нимейера: https://github.com/rniemeyer/knockout-postbox
Вы можете использовать syncWith для обновления наблюдаемой управляющей видимости. Таким образом, обеим моделям представления не нужно знать друг о друге, и вы не будете жестко кодировать ссылки на ваши модели.
syncWith - syncWith (topic, [initializeWithLatestValue], [skipInitialPublish], [равенства Comparer])
Функция syncWith сообщает наблюдаемому о подписке и публикации по теме. Это позволяет наблюдаемым в двух разных моделях представления оставаться в синхронизации друг с другом, не имея прямого знания своего аналога.
//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);