2013-06-27 60 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

相關問題