MVVM架構~前臺后臺分離的思想與(yu)實(shi)踐(jian)
MVVM是(shi)(shi)一(yi)(yi)種(zhong)架構思想,是(shi)(shi)一(yi)(yi)種(zhong)解決問題的方式,對于一(yi)(yi)個(ge)項目,一(yi)(yi)個(ge)功能模塊,你可以選擇使用(yong)MVVM的架構來(lai)實(shi)現,而knockoutjs只是(shi)(shi)實(shi)現MVVM的一(yi)(yi)種(zhong)工具,它(ta)是(shi)(shi)在前端實(shi)現的,這一(yi)(yi)點,我們必須的清楚(chu).
思想
下(xia)面說(shuo)一下(xia)這(zhe)講的(de)(de)(de)重點,前(qian)臺和后臺的(de)(de)(de)分(fen)工(gong)問題(ti),占占認為(wei),前(qian)臺只負責(ze)頁面及頁面CSS及實現效果的(de)(de)(de)JS,而(er)后臺的(de)(de)(de)工(gong)作(zuo)包(bao)括業務的(de)(de)(de)處理,數(shu)據(ju)的(de)(de)(de)持久化,前(qian)臺數(shu)據(ju)的(de)(de)(de)綁(bang)定(knockoutjs)等等.
實踐
下面是前臺HTML代碼(ma)
<table border="1"> <tr> <th>QuestionInfoID </th> <th>用戶</th> <th>類型</th> <th>知識點</th> <th>難度</th> <th>日期</th> <th>年級</th> <th>學科</th> <th>圖像</th> </tr> <tbody data-bind="foreach:model"> <tr> <td data-bind="text:QuestionInfoID"></td> <td> <span data-bind="if:Partner_Info"><span data-bind="text:Partner_Info.AccountName"></span></span> <span data-bind="if:User_Info"><span data-bind="text:User_Info.RealName"></span></span> </td> <td data-bind="text:OwnerType"></td> <td data-bind="text:Knowledge"></td> <td data-bind="text:Difficulty"></td> <td data-bind="text:AddTime"></td> <td data-bind="foreach:Question_Point_R"><span data-bind="text:Point_Info.Grade"></span></td> <td data-bind="foreach:Question_Point_R"><span data-bind="text:Point_Info.Subject"></span></td> <td> <img width="21" height="21" src="1.jpg" onerror="errorImg(this)" /></td> </tr> </tbody> </table>
下(xia)面是(shi)后臺的(de)knockoutjs代碼
@Html.Pager(Model)//C#數據分頁 <script type="text/ecmascript"> //圖像(xiang)加載出錯時(shi)的處理 function errorImg(img) { img.src = "//www.baidu.com/img/bdlogo.gif"; img.onerror = null; } var model = ko.observableArray(@Html.Raw(Json.Encode(Model)));//從后(hou)臺得到數據集合(he),并轉化為(wei)json對象 ko.applyBindings(model); </script>
運行截圖

說明
在這(zhe)個例子中,我(wo)們使用了knockoutjs里(li)的if,foreach等關鍵字,if可(ke)以判斷一個對(dui)象是(shi)否為空,而foreach可(ke)以把集合對(dui)象遍歷出(chu)來(lai).