2013-06-27 59 views
1

我一直在使用Knockout.js几个星期,现在正在做示例和其他教程,但我仍然试图找出如何构造一切在我正在处理的应用上。这是一个简单的学校后端应用程序,可以保存所有课程,成绩,教师,出勤和学生的列表。它有多个页面:构建一个多视图(多个页面)Knockout.js应用程序

  • 所有clases(在这里您可以添加/编辑/删除类)
  • 每一类有一个列表中的学生(在这里您可以添加/编辑/删除学生)的列表
  • 每个学生都有他/她的出席名单和等级
  • 教师页
  • 学校科目页面
  • 和其他...

如何构建此应用程序?我已经通过创建一个类模型开始的“类”页面上:

function Class(data) { 
    var self = this; 

    self.id = data.id; 
    self.name = ko.observable(data.name); 
    self.students = data.students; 
    self.attendance = data.attendance; 
} 

...和加载初始内容(类列表)一类视图模型。它还包含添加,编辑和删除类的功能。

function ClassViewModel() { 
    var self = this; 

    self.classes = ko.observableArray(ko.utils.arrayMap(classArr, function(eachClass) { 
    return new Class(eachClass); 
    })); 

    [...] 
} 

所以做我继续做一个独立的模型和视图模型的应用程序的每个主要部分(学生,教师,学科等),并分别结合他们自己的页面?如果我走这条路线,我怎样才能在ViewModels之间共享功能,而不必为每个功能添加相同的功能?

回答

-1

我已经为KO创建了一个名为Knockout.BindingConventions的约定。

https://github.com/AndersMalmgren/Knockout.BindingConventions/wiki

安装使用的NuGet该库的

Install-Package Knockout.BindingConventions 

一个特点就是它的模板惯例,基本上明白了一个名为ClassViewModel视图模型应该连接到模板(视图)称为ClassView

http://jsfiddle.net/xJL7u/

我还创建了一个模板,引导程序,以上图书馆利用 https://github.com/AndersMalmgren/Knockout.Bootstrap/wiki

安装使用的NuGet

Install-Package Knockout.Bootstrap 

有了这两个库相结合,你可以在服务器上构建应用程序像这样(用你的ClassViewModel为例如)

app 
    Class 
     ClassViewModel.js 
     OtherViewModel.js 
    Shared 
     DatePickerViewModel.js 
views 
    Class 
     ClassView.htm 
     OtherView.htm 
    Shared 
     DatePickerView.htm 

完全工作MVC4演示这里 https://github.com/AndersMalmgren/Knockout.Bootstrap.Demo

相关问题