0

是否可以在菜单中选择一个模板之前预先选择一个模板。例如，如果我有以下 knockoutJS 代码：http: //jsfiddle.net/rqa8P/15/ 

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

// ----------------------------------------------------------------------------
// 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!")
};

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

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

我的目标是当页面加载时，主页 2 模板已经加载到 dom 中，如果我单击主页 1，那么它应该立即加载 SubPage1 内容。此刻总是有一个网站之前......

问候！

4

1 回答 1

0

您已经选择了可观察的视图，为什么不放入预定义的值？您需要将 ViewModel 重写为构造函数以调用内部变量this：

// ControlViewModel (cvm), 
var cvm = function () {
  //Main Pages
  this.mainPage1view = new View("mainpage1", "mainPage1Tmpl", MainPage1viewModel);
  this.mainPage2view = new View("mainpage2", "mainPage2Tmpl", MainPage2viewModel);

  //make the selected page observable
  this.selectedView = ko.observable(this.mainPage2view);
};

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

JSFiddle：http: //jsfiddle.net/rqa8P/16/

或者在声明 ViewModel 之后添加 selectedView 属性，以便您可以使用 cvm.mainPage2view 对象变量：

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

//make the selected page observable
cvm.selectedView = ko.observable( cvm.mainPage2view );

JSFiddle：../17/（不能发布更多链接）

或者只是在声明 ViewModel 之后放置值，就像任何其他 observable 一样：

// 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(),
};

cvm.selectedView( cvm.mainPage2view );

JSFiddle：../18/（不能发布更多链接）

对于子页面内容，与 mainPage1view.selectedView observable 类似。

于 2013-07-24T23:03:01.733 回答