2013-11-27 59 views
0

我有一個父模型是這樣的無法訪問內與

function VM() { 
    var self = this; 
    self.MyPage = ko.observable() 

} 

var vm = new VM() 

淘汰賽方法環路是那麼我的孩子模型是這樣的。

var page = function(parent) { 
    var self = this 
    self.Info = ko.observable() 

    self.LoadData = function(){ 
     self.GetNext() 
    } 

    self.GetNext = function(){ 
     var url  = 'Questions/GetNext' 
     var type = 'GET' 
     ajax(url , null , self.OnGetNextComplete, type)      
    } 
    self.OnGetNextComplete = function(data){ 
     self.Info(data.Payload) 
    } 


    self.AcceptedChoices = function(data,choiceId){ 
     return in_array(choiceId,data.AcceptedChoices) ? 'selected' : '' 
    } 
    self.LoadData() 
} 

這是我如何使用它。

vm.MyPage(new page(vm)) 
ko.applyBindings(vm)    

所有的工作暫時正常。現在要在頁面上使用這個孩子,我使用這樣的with binding

`<body data-bind="with:MyPage">` 

這讓我在當前頁面上使用child。 接下來,我是這樣綁定的。

<div data-bind="foreach:Info"> 
    <article> 
     <h2 data-bind="text:QuestionText"></h2> 
     <ul data-bind="foreach:Choices"> 
      <li data-bind="text:ChoiceText,css:$parent.AcceptedChoices()"></li> 
     </ul> 
    </article> 
</div> 

這裏是信息JSON

{ 
    "Choices": [{ 
     "ChoiceId": 102, 
     "ChoiceText": "Not at all" 
    }, { 
     "ChoiceId": 103, 
     "ChoiceText": "Somewhat" 
    }, { 
     "ChoiceId": 104, 
     "ChoiceText": "Very important" 
    }], 
    "QuestionText": "My personal religious beliefs are important" 
},{ 
    "Choices": [{ 
     "ChoiceId": 99, 
     "ChoiceText": "Never" 
    }, { 
     "ChoiceId": 100, 
     "ChoiceText": "Sometimes" 
    }, { 
     "ChoiceId": 101, 
     "ChoiceText": "Always" 
    }], 
    "QuestionText": "I am a leader" 
}, 
{ 
    "Choices": [{ 
     "ChoiceId": 96, 
     "ChoiceText": "Never" 
    }, { 
     "ChoiceId": 97, 
     "ChoiceText": "Sometimes" 
    }, { 
     "ChoiceId": 98, 
     "ChoiceText": "Always" 
    }], 
    "QuestionText": "I manage time properly" 
} 

的問題是,它總是說$parent.AcceptedChoices是不確定的。我已經使用root , parent[1] , parent[2]等,但沒有任何工作。我怎樣才能做到這一點。

+1

出於好奇,你有什麼反對的;字符? –

+0

不,我從來沒有在JavaScript中使用分號仍然效果不錯 –

回答

0

當你實例化一個新的視圖模型時,它不會明確地創建你正在尋找的從孩子到父母的關係。當您在現有上下文中創建新的上下文時,完成創建子$的父項。這是在你做這樣的事情時完成的 -

// Context of myPage 
<div data-bind="with: myPage"> 
    // Each instance of Info creates it's own context 
    <div data-bind="foreach:Info"> 
     // Now you can reference the $parent object, whi 
     <article data-bind="with: $parent.selectedInfo"> 
     </article> 
     // Or you can reference the parent's parent, which has myPage within it's context 
     <article data-bind="with: $parents[1].myPage"> 
     </article> 
    </div> 
</div> 

因爲上下文在它自己的範圍內創建一個新的上下文。

你在做什麼是引用一個單獨的視圖模型,它有它自己的上下文。要訪問父視圖模型,你可以做這樣的事情 - 如果你定義,在這方面家長應該指的是父視圖模型傳遞

var page = function(parent) { 
    var self = this; 
    self.Info = ko.observable(); 
    self.parentVM = parent; 
} 

然後您可以從您的視圖模型作爲這樣調用此 -

<div data-bind="with: parentVM.myPage"></div> 

當然,這是僞代碼,所以你可能需要調整它以工作方式。

+0

感謝您的回覆,但我需要使用MyPage上下文,因爲您看到AcceptedChoices在那裏定義。我需要以某種方式訪問​​它。我只是嘗試這樣,它的工作。 '$ root.MyPage()。AcceptedChoices' –

+0

你可以引用myPage上下文,因爲我在我的答案中使用parentVM.MyPage()發佈,因爲你將它傳遞給新的page()方法... –