KnockoutJS - 嵌套模板中的 observables

Question

我已经实现了一个简单的带有敲除 js 的 spa，你可以在几个页面之间导航，每个页面呈现一个视图模型。菜单是 2 级菜单，因此我有主页面和子页面。 我用淘汰赛的模板引擎实现了这个任务。不幸的是，子页面中的 observables 出现了一个大问题。它只是行不通。这个简单应用程序的相应小提琴可以在这里找到：http://jsfiddle.net/rqa8P/10/

代码：

// ----------------------------------------------------------------------------
// 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);

对于主页面，视图模型的初始化函数和可观察对象可以完美运行，但是如果我导航到子页面，初始化函数和可观察元素都不起作用。这里有什么问题，什么可以解决这个问题？我在某处读到所有可观察对象都必须在应用的视图模型对象中声明，但是为什么主页中的视图模型的可观察对象可以工作，为什么子页面不能，因为两者都没有直接绑定到 html？我希望有人能给我一个提示我如何解决这个问题，我现在正在寻找几个小时来找到一个好的和满意的解决方案，我不必重新构建我为网络应用程序导航选择的当前架构......

最好的问候

Answer 1

您的问题是，当您创建 MainPage1viewModel 时，您将子页面视图模型传递给 View 构造函数，但子模型尚不存在。如果在创建3个子模型之后移动MainPage1viewModel1的创建，那么它就可以正常工作了。

这是一个更新的小提琴：http://jsfiddle.net/rniemeyer/sfeBx/