Question

我已经和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;
}

...和一个加载初始内容（类列表）的类ViewModel。它还包含添加，编辑和删除类的功能。

function ClassViewModel() {
  var self = this;

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

  [...]
}

那么我是否继续为应用程序的每个主要部分（学生，教师，科目等）创建单独的模型和ViewModel，并将它们分别绑定在自己的页面上？如果我走这条路线，如何在没有为每个功能添加相同功能的情况下在ViewModels之间共享功能？

Answer 1

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

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

使用nuget安装

Install-Package Knockout.BindingConventions

该库的一个特性是它的模板约定，基本上它理解名为 ClassViewModel 的视图模型应该连接到名为 ClassView 的模板（View）

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

构建一个多视图（多页）Knockout.js应用程序

1 个答案: