knockout.js доступ к свойствам модели контейнера в виде viewModel

Question

У меня есть вложенные модели просмотра, как показано ниже. Я пытаюсь получить доступ к значению в модели представления контейнера из содержащейся модели представления (дочерний элемент). Я получил неопределенную ошибку, когда modelA.prop1 пытается получить значение mainVM.prop1. Спасибо за вашу помощь.

function mainVM() { 

    var self = this; 

    //chain associated view models 
    self.modelA = new modelA(); 
    self.modelB = new modelB(); 

    self.prop1 = ko.observable("some value from mainVM.prop1"); 

} 
function modelA(){ 
    var self = this; 
    self.prop1 = ko.observable(mainVM.prop1); //I'd like to get value in containing view model above 
} 
function modelB(){....} 

$(function() { 
    var viewModel = new mainVM(); 
    ko.applyBindings(viewModel); 
}); 

Answer 1

Если вы хотите, чтобы сделать суб-ViewModels зависимый/об их родитель, вы должны будете передать его им. Например:

function mainVM() { 
    var self = this; 

    //chain associated view models 
    self.modelA = new modelA(self); 
    self.modelB = new modelB(self); 

    self.prop1 = ko.observable("some value from mainVM.prop1"); 

} 
function modelA(parent){ 
    var self = this; 
    self.prop1 = ko.observable(parent.prop1); //I'd like to get value in containing view model above 
} 
function modelB(parent){....} 

$(function() { 
    var viewModel = new mainVM(); 
    ko.applyBindings(viewModel); 
}); 

Подумайте об этом, хотя эта зависимость вам нужна в вашем дизайне.

Альтернативных (хотя, возможно, хуже, с точки зрения дизайна) решением было бы дать им доступ через сферу, например:

$(function() { 
    function mainVM() { 
     var self = this; 

     //chain associated view models 
     self.modelA = new modelA(); 
     self.modelB = new modelB(); 

     self.prop1 = ko.observable("some value from mainVM.prop1"); 

    } 
    function modelA(){ 
     var self = this; 
     self.prop1 = ko.observable(viewModel.prop1); //I'd like to get value in containing view model above 
    } 
    function modelB(){....} 

    var viewModel = new mainVM(); 
    ko.applyBindings(viewModel); 
}); 

Answer 2

Некоторые дополнительные мысли к @Jeroen ответу

Имея зависимости для родителей от детей - это не только плохой дизайн, он может создать трудно найти утечки памяти.

Если вы используете родителя из вычисленного в дочернем элементе KO, то подключитесь к зависимости, если вы удалите дочерний объект, который он вычислен, будет по-прежнему запускать wh en родительское состояние изменения.

Мой общий способ решения зависимостей между моделями заключается в использовании шаблона EventAggregator, я сделал один для этой библиотеки

https://github.com/AndersMalmgren/SignalR.EventAggregatorProxy

Его библиотека signalR, если вам не нужно singalR вы можете извлечь агрегации событий часть

Демо http://jsfiddle.net/jh8JV/

ViewModel = function() { 
    this.events = ko.observableArray(); 
    this.subModel = new SubViewModel(); 

    signalR.eventAggregator.subscribe(Event, this.onEvent, this); 
}; 

ViewModel.prototype = { 
    onEvent: function(e) { 
     this.events.push(e); 
    } 
}; 

Answer 3

Я думаю, что здесь у вас есть «проблема XY»: вы хотите выполнить задачу X (которую вы здесь не назвали), и вы думаете, что реализация Y (в данном случае дочерняя VM, имеющая зависимость от ее родителя) это способ сделать это, хотя Y может быть не лучшим (или даже хорошим) способом сделать это.

В чем проблема, которую вы пытаетесь решить? Если вам нужно получить доступ к родительскому свойству из дочерней привязки, контекст привязки Knockout ($ root, $ parent, $ parents [] и т. Д.) Позволит вам это сделать, например.

<div data-bind="with:modelA"> 
    <p>prop2 is <span data-bind="text:prop2"></span> 
     and prop1 from the main model is 
     <span data-bind="text:$root.prop1"></span> 
    </p> 
</div> 

В этом случае вы можете использовать $parent вместо $root, так как есть только один уровень вложенности.