KnockoutJS несколько моделей просмотра и «вспыхивают» одного

Question

Так я работаю с несколькими моделями просматривать с помощью KnockoutJS, например:

function firstViewModel() { 
    var self = this; 
    self.dataArray = ko.observableArray([ 
     { title: "title1", theData: "data1" }, 
     { title: "title2", theData: "data2" }, 
     { title: "title3", theData: "data3" }, 
    ]); 
}; 

function secondViewModel() { 
    var self = this; 
    self.addData = function() { 
     firstViewModel.dataArray.push({ title: "newTitle", theData: "newData" }); 
     // trying to trigger dataArray in firstViewModel, doesn't work 
    } 
}; 

ko.applyBindings(new firstViewModel(), document.getElementById('first')); 
ko.applyBindings(new secondViewModel(), document.getElementById('second')); 

Тогда что-то вроде:

<div id="first" data-bind="with: dataArray"> 
    <ul data-bind="foreach: $data"> 
     <li data-bind="text: theData"></li> 
    </ul> 
</div> 
<div id="second"> 
    <button data-bind="click: addData">add</button> 
</div> 

Причина это структурированный таким образом, потому что у меня есть 3-я модель представления и элементы перекрываются в DOM. Я не мог понять, как получить this для работы.

Есть ли способ сохранить структуру и ссылку firstViewModel внутри secondViewModel? firstViewModel.theData.push ("newData"); явно не работает, но я думал, что включу его, чтобы уточнить, что я хочу делать.

Я новичок в KO - извините, если это глупый вопрос.

EDIT: Похоже, я понял!

Если удалить «я» от firstViewModel это работает ...

dataArray = ko.observableArray([ 
    { title: "title1", theData: "data1" }, 
    { title: "title2", theData: "data2" } 
]); 

затем

self.addData = function() { 
    dataArray.push({ title: "newTitle", theData: "newData" }); 
} 

Я еще не знаю, есть ли последствия удаления «я», но он работает до сих пор.

Answer 1

Лично я предпочитаю, чтобы мои модели отсоединена, а также использовать публикации/подписки шаблон, чтобы дать им возможность общаться друг с другом. См. Мой ответ Variable Dependency with knockoutJS

Кроме того, если вы хотите спуститься по этой дороге, вы также можете посмотреть knockout postbox, чтобы выполнить то же самое.

Answer 2

Вы можете передать ссылку первого ViewModel:

function firstViewModel() { 
    var self = this; 
    self.dataArray = ko.observableArray([ 
     { title: "title1", theData: "data1" }, 
     { title: "title2", theData: "data2" }, 
     { title: "title3", theData: "data3" }, 
    ]); 
}; 

function secondViewModel(firstViewModel) { 
    var self = this; 
    self.addData = function() { 
     firstViewModel.dataArray.push({ title: "newTitle", theData: "newData" }); // doesn't work 
    } 
}; 

var firstVm = new firstViewModel(); 
var secondVm = new secondViewModel(firstVm); 
ko.applyBindings(firstVm, document.getElementById('first')); 
ko.applyBindings(secondVm, document.getElementById('second'));