javascript - 构建多 View (多页面)Knockout.js 应用程序

Question

我已经使用 Knockout.js 几个星期了，现在正在做示例和其他教程，但我仍在尝试弄清楚如何构建我正在开发的应用程序上的所有内容。这是一个简单的学校后端应用程序，保存所有类(class)、成绩、教师、出勤和学生的列表。它有多个页面:

• 所有类的列表(您可以在其中添加/编辑/删除类)
• 每个类(class)都有一个学生列表(您可以在其中添加/编辑/删除学生)
• 每个学生都有一份出勤率和成绩列表
• 教师页面
• 学校科目页面
• 以及其他...

我该如何构建这个应用程序？我已经通过创建类模型开始进入“类”页面:

function Class(data) {
  var self = this;

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

...以及加载初始内容(类列表)的类 ViewModel。它还包含添加、编辑和删除类的功能。

function ClassViewModel() {
  var self = this;

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

  [...]
}

那么我是否继续为应用程序的每个主要部分(学生、教师、科目等)创建单独的模型和 View 模型，并将它们分别绑定(bind)到自己的页面上？如果我走这条路，如何在 ViewModel 之间共享功能而不向每个 View 添加相同的功能？

Answer 1

我为 KO 创建了一个约定优于配置的库，名为 Knockout.BindingConventions。

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

使用nuget安装

Install-Package Knockout.BindingConventions

该库的一个功能是它的模板约定，基本上它理解名为 ClassViewModel 的 View 模型应该连接到名为 ClassView

的模板( View )

http://jsfiddle.net/xJL7u/

我还创建了一个利用上述库的模板 Bootstrap 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