我已经使用 knockout js 实现了一个简单的 spa,您可以在其中在多个页面之间导航,每个页面都呈现一个 View 模型。菜单是一个 2 级菜单,因此我有主页面和子页面。 我用knockout的模板引擎实现了这个任务。不幸的是,子页面中的可观察对象出现了一个大问题。它只是行不通。这个简单应用程序的相应 fiddle 可以在这里找到: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);
对于主页面, View 模型的初始化函数和可观察对象工作得很好,但如果我导航到子页面,初始化函数和可观察元素都不起作用。这里有什么问题,什么可以解决这个问题?我在某个地方读到所有可观察对象都必须在应用的 View 模型对象中声明,但是为什么主页面中 View 模型的可观察对象工作然后为什么子页面不工作,因为两者都没有直接绑定(bind)到 html?我希望有人能给我提示我如何解决这个问题,我现在正在寻找几个小时来找到一个好的和满意的解决方案,我不必重新构建我为 Web 应用程序导航选择的当前架构......
最好的问候
最佳答案
您的问题是,当您创建 MainPage1viewModel
时,您将子页面 View 模型传递给 View
构造函数,但子模型尚不存在.如果在创建 3 个子模型之后移动 MainPage1viewModel1
的创建,那么它将正常工作。
这是一个更新的 fiddle :http://jsfiddle.net/rniemeyer/sfeBx/
关于templates - KnockoutJS - 嵌套模板中的可观察对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17760301/