KnockoutJS - 중첩 템플릿의 관측 가능

Question

노크 아웃 j가있는 간단한 스파를 구현했으며 각 페이지에서 뷰 모델을 제시하는 여러 페이지 사이를 탐색 할 수 있습니다. 메뉴는 2 단계 메뉴이므로 기본 페이지와 하위 페이지가 있습니다. 녹아웃의 템플릿 엔진으로이 작업을 실현했습니다. 불행하게도 큰 문제는 하위 페이지의 관찰 가능 항목에서 발생했습니다. 그것은 단지 작동하지 않습니다. 이 간단한 응용 프로그램에 대한 해당 바이올린은 여기에서 찾을 수 있습니다 : http://jsfiddle.net/rqa8P/10/

강령 : 뷰 모델의 초기화 기능과 obeservables가 완벽하게 작동하지만, 메인 페이지의 경우

// ---------------------------------------------------------------------------- 
// View 
var View = function(page, templateName, data) { 
    var self = this; 

    self.page = page; 
    self.templateName = templateName; 
    self.data = data; 

    //animations between page changes 
    this.animatePageChange = function() { 
     $('.wrapper').hide(); 
     $('.wrapper').fadeIn(3000); 
     //init function for each main menu view model 
     //alert(self.data.init()); 
    }; 

    //animations between sup page changes 
    this.animateSubPageChange = function() { 
     $('.content').hide(); 
     $('.content').fadeIn(3000); 
     //init function for each sub menu view model 
     //alert(self.data.init()); 
    } 
}; 

// ---------------------------------------------------------------------------- 
// MainPage1viewModel (Menu Page) 
var MainPage1viewModel = { 
    //Sub Pages 
    subpage1view : new View("subpage1", "subpage1Tmpl", SubPage1ViewModel), 
    subpage2view : new View("subpage2", "subpage2Tmpl", SubPage2ViewModel), 
    subpage3view : new View("subpage3", "subpage3Tmpl", SubPage3ViewModel), 

    //make the selected sub page observable 
    selectedView : ko.observable(), 

    init: function() {return("MainPage1viewModel init")} 
}; 

// ---------------------------------------------------------------------------- 
// SubPage1ViewModel (Subpage from Main Page View 1) 
var SubPage1ViewModel = { 
    init: function() {return("SubPage1ViewModel init")}, 
    somedata : ko.observable("Here comes some data!") 
}; 

// ---------------------------------------------------------------------------- 
// SubPage2ViewModel (Subpage from Main Page View 1) 
var SubPage2ViewModel = { 
    init: function() {return("SubPage2ViewModel init")}, 
    somedata : ko.observable("Here comes some data!") 
}; 

// ---------------------------------------------------------------------------- 
// SubPage3ViewModel (Subpage from Main Page View 1) 
var SubPage3ViewModel = { 
    init: function() {return("SubPage3ViewModel init")}, 
    somedata : ko.observable("Here comes some data!") 
}; 

// ---------------------------------------------------------------------------- 
// MainPage2 View (Main Menu) 
var MainPage2viewModel = { 
    //init function 
    init: function() {return("MainPage2viewModel init")}, 

    somedata : ko.observable("Here comes some data!") 
}; 

// ---------------------------------------------------------------------------- 
// ControlViewModel (cvm), 
var cvm = { 
    //Main Pages 
    mainPage1view : new View("mainpage1", "mainPage1Tmpl", MainPage1viewModel), 
    mainPage2view : new View("mainpage2", "mainPage2Tmpl", MainPage2viewModel), 

    //make the selected page observable 
    selectedView : ko.observable(), 
}; 

//bind the cvm view model to the index.html 
ko.applyBindings(cvm); 

나는 하위 페이지로 이동하는 경우 init 함수는 작동하지 않으며 관찰 가능한 요소도 작동하지 않습니다. 여기에 무엇이 잘못되었으며 이것에 대한 해결책이 될 수 있습니까? 모든 observables는 어플리 케이션 뷰 모델 오브젝트에서 선언되어야하지만 어째서 메인 페이지의 뷰 모델에 대한 observables가 작동하는지, 왜 서브 페이지가 아니라면 html에 직접 바인드되지 않으므로? 누군가가 내게 문제를 해결할 수있는 힌트를 줄 수 있기를 바란다. 지금은 웹 애플리케이션 탐색을 위해 현재 아키텍처를 다시 구조 할 필요가없는 훌륭하고 만족스러운 해결책을 찾기 위해 몇 시간을 기다리고있다.

안부

Answer 1

귀하의 문제는 당신이 당신의 MainPage1viewModel를 만들 때, 당신은 View 생성자에 하위 페이지 뷰 모델을 통과되지만, 하위 모델은 아직 존재하지 않는다는 것입니다. 3 개의 하위 모델을 생성 한 후 MainPage1viewModel1의 생성을 이동하면 올바르게 작동합니다.

여기에 업데이트 된 바이올린입니다 : http://jsfiddle.net/rniemeyer/sfeBx/