用Demo記錄knockoutjs之mapping擴展的使用

最新推荐文章于 2024-06-13 13:41:07 发布

upc_young

最新推荐文章于 2024-06-13 13:41:07 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/upc_young/article/details/18659873

版权

前言：本文以Demo的形式演示Knockoutjs之mapping擴展的簡單使用。Knockoutjs是基於javascript的MVVM框架，利用它可以很好的實現view層與model層的數據同步，而mapping擴展可以根據服務器獲取的數據生成ViewModel。本文以班級——學生這一場景演示Knockoutjs之mapping擴展的使用。

一、完整的Demo

1.1 服務端

Demo所用數據存儲於sql server，表結構與關係如圖1所示，涉及班級表和學生表（一對多關係）兩個表。

表1 數據表結構及關係

服務端與SQL的數據交互利用.Net之EF框架，生成的Model中Calsse與Student存在主外鍵約束，為了避免在序列化時的循環引用錯誤，引入Newtonsoft.Json（可以NuGet添加）,在Student中添加以下代碼(如果以獲取Student數據為重點，在Calsse類中Stuent屬性添加JsonIgnore)：

        [JsonIgnore]
        public virtual Classe Classe { get; set; }

加入JsonIgnore後，在序列化過程中將會忽略掉該屬性。

為了讀取數據，新建Controllers文件夾並添加Web Api控制器類ClassInfoControllers，在Global中註冊WebApi(關於WebApi)。在ClassInfoControllers添加如下方法：

public class ClassInfoController : ApiController
        {
        // GET api/<controller>
           public ManuModel Get()
           {
                var context = new ModelTestEntities1();
                var model = new ManuModel {Classes = context.Classe.ToList()};
                return model;
           }
        }

其中，ManuModel是對實體類的包裝（為了前端Mapping），代碼如下：

  public class ManuModel
       {
           public IEnumerable<Classe> Classes { get; set; } 
       }

1.2 Web前前端

新建Html頁面，引入JQuery、knockout、mapping對應的js文件。添加如下JavaScript代碼：

 <script>
        $(function () {
            $.ajax({
                type: "GET",
                url: "api/ClassInfo",
                dataType: "json",
                async: false,
                cache: false,
                success: function (data) {
                    var mapping = {
                        'Student': {
                            update: function (option) {
                                var mid = option.data;
                                if (option.data) {
                                    mid.Birthday = option.data.Birthday.toString().split('T')[0];
                                }
                                return mid;
                            }, create: function (option) {
                                var mid = option.data;
                                mid.Age = ko.computed(function () {
                                    var year = (new Date()).getYear() + 1900;
                                    var newy = parseInt(mid.Birthday);
                                    return year-newy;
                                });
                                return mid;
                            }
                        }
                    };
                    var viewModel = ko.mapping.fromJS(data, mapping);
                    ko.applyBindings(viewModel);
 
                }
            });
        })
    </script>

在MVVM中最好是VM與View之間單一依賴，在Js中不出現dom對象。Html代碼如下：

  <div data-bind="foreach:Classes">
        <div>
            <div style="background-color: #f0e68c; width: 20%"><span data-bind="text:Name"></span></div>
            <div>
                <table>
                    <thead>
                        <tr>
                            <td>姓名</td>
                            <td>性别</td>
                            <td>出生年月</td>
                            <td>年齡</td>
                        </tr>
                    </thead>
                    <tbody data-bind="foreach:Student">
                        <tr>
                            <td><span data-bind="text:Name"></span></td>
                            <td><span data-bind="text:Sex"></span></td>
                            <td><span data-bind="text:Birthday"></span></td>
                            <td><span data-bind="text:Age"></span></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

至此工作完成，在瀏覽器中查看，結果如圖2所示。