knockout.js訪問包含的視圖中的容器模型屬性Model

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父母更改狀態。

我的模型之間解決的依賴關係的一般方法是使用一個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> 

在這種情況下，你可以代替$root使用$parent因爲只有一個級別嵌套。