MVC MVVM Knockout 常遇問題總結

標籤：des   style   class   blog   java   http   

1、模板綁定(使用外掛程式jquery.tmpl)

var ViewModel={Product:ko.observable()}

    <div data-bind="template:{name:‘templatePropertys‘}"><div>    <script type="text/html" id="templatePropertys">        {{each(i,item) Product().自訂屬性集}}        <div class="form-group">            <label for="inputEmail3" class="col-lg-2 control-label" data-bind="text:item.Key"></label>            <div class="col-sm-10">                <input type="email" class="form-control" id="inputEmail3" placeholder="Email" data-bind="value:item.Value">            </div>        </div>        {{/each}}    </script>

 在寫each對象集的時候請注意 ViewModel的屬性一定要加‘()‘,屬性對象內的對象不需要加‘()‘

 

2、關於ko的重複綁定

 ko.cleanNode(document.getElementById("divCatalog"));//清除綁定
ko.applyBindings(CatalogVM, document.getElementById("divCatalog"));//再次重新綁定

 

3、轉化View Model資料到JSON格式

 ko.toJS — 複製你的view model對象，並且替換所有的observable 對象為當前的值，這樣你可以得到一個乾淨的和Knockout無關的資料copy。

 ko.toJSON — 將view model對象轉化成JSON字串。原理就是：先調在view model上調用ko.toJS，然後呼叫瀏覽器原生的JSON 序列化器得到結果。註：一些老瀏覽器版本不支援原生的JSON 序列化器（例如：IE7和以前的版本），你需要引用json2.js類庫。

 

4、使用JSON更新View Model資料

如果你從伺服器端擷取資料並且更新到view model上，最簡單的方式是自己實現。例如

 

// Load and parse the JSONvar someJSON = /* Omitted: fetch it from the server however you want */;var parsed = JSON.parse(someJSON);// Update view model propertiesviewModel.firstName(parsed.firstName);viewModel.pets(parsed.pets);

 

 5、.net C# 向後台非同步提交json模型

var d = ko.toJS(BaseInfo);
var c = JSON.stringify(d);//將json轉為字串

 

6、操作observableArray

indexOf

indexOf方法返回數組中第一個等於你傳入參數項的索引，例如myObservableArray.indexOf(‘Blah‘)將會返回從0開始第一個數組項等於Blah的數組索引，如果沒有找到匹配記錄則返回-1.

Slice

Slice函數是observableArray等價於原生的JavaScript的slice方法（它返回從開始索引到結束索引之間的所有對象集合）。調用myObservableArray.slice(...)等價於調用myObservableArray.slice(...)方法。

操作observableArray

observableArray提供了一組簡單的方法來運算元組的內容並通知訂閱者。

pop, push, shift, unshift, reverse, sort, splice

以上的這些方法等價於使用原生JavaScript方法對數組進行操作，最大的區別在於它們會通知訂閱者數組的變化。

myObservableArray.push(‘Some new value‘)在數組末尾添加一個新項

myObservableArray.pop()移除數組最後一項並返回它

myObservableArray.unshift(‘Some new value‘)在數組頭部插入新項

myObservableArray.shift()移除數組中第一項並返回它

myObservableArray.reverse()翻轉整個數組的順序

myObservableArray.sort()對數組內容進行排序

預設情況下，按照字元（如果是字串）或數字（如果是數字）順序排序

另外，你也可以通過傳入一個排序函數來對數組進行排序。這個排序函數需要接受兩個參數（代表數組兩個要比較的項），如果第一項小於第二項，則返回-1；大於返回1；等於返回0。

例如：使用lastname對Person對象進行排序，你可以這樣寫：

1. myObservableArray.sort(function(left, right) {    
2. return left.lastName == right.lastName ? 0 : (left.lastName < right.lastName ? -1 : 1)    
3. });  

myObservableArray.splice()刪除指定索引和指定數目的數組元素對象。例如：myObservableArray.splice(1, 3)從1開始刪除3個元素，並將這3個元素作為元素數組返回。 想瞭解observableArray 更多的函數資訊，可以參考標準JavaScript數組函數的文檔。

remove and removeAll

observableArray 添加了許多非常有用但JavaScript數組預設沒有的函數方法。

myObservableArray.remove(someItem) 刪除所有值等於someItem 的數組項，並將刪除元素作為一個數組返回

myObservableArray.remove(function(item) { return item.age < 18 })刪除所有元素age 屬性小於18的數組項，並將刪除元素作為一個數組返回

myObservableArray.removeAll([‘Chad‘, 132, undefined]) 刪除所有值等於‘Chad‘、132、undefined的數組項，並將刪除元素作為一個數組返回

myObservableArray.removeAll()刪除所有的數組項，並將刪除元素作為一個數組返回

destroy and destroyAll

（註：通常只和和Ruby on Rails開發人員有關）

destroy和destroyAll函數是為Ruby on Rails開發人員方便使用為開發的：

myObservableArray.destroy(someItem)尋找所有值等於someItem 的數組元素對象，並給它們添加_destroy 的屬性，賦值為true

myObservableArray.destroy(function(someItem) { return someItem.age < 18 }) 尋找所有元素age屬性小於18的數組元素對象，並給它們添加_destroy 的屬性，賦值為true

myObservableArray.destroyAll([‘Chad‘, 132, undefined])尋找所有值等於‘Chad‘、132、undefined的數組元素對象，並給它們添加_destroy 的屬性，賦值為true

myObservableArray.destroyAll()給所有的元素對象添加_destroy 的屬性，賦值為true

那麼，_destroy是做什麼用的？正如我提到的，這隻是為Rails 開發人員準備的。在Rails 開發過程中，如果你傳入一個JSON對象，Rails 架構會自動轉換成ActiveRecord對象並且儲存到資料庫。Rails 架構知道哪些對象以及在資料庫中存在，哪些需要添加或更新， 標記_destroy為true就是告訴架構刪除這條記錄。

注意的是：在KO render一個foreach模板的時候，會自動隱藏帶有_destroy屬性並且值為true的元素。所以如果你的“delete”按鈕調用destroy(someItem) 方法的話，UI介面上的相對應的元素將自動隱藏，然後等你提交這個JSON對象到Rails上的時候，這個元素項將從資料庫刪除（同時其它的元素項將正常的插入或者更新）。