MVVM架构~knockoutjs与MVC配合，实现列表的增删改功能

MVC与MVVM的模型

在MVC实例项目中，为我们提供了简单的增删改查功能，而这种功能的实现与具体的Model很有关系，或者说它与后台数据库的关系过于紧密了，而对于开发人员来说当页面布局修改后，也会现时修改它们的Model部分，而对于MVVM思想体系来说，它可以不去修改后台Model，而后采用了一种前台绑定的方式，很好的实现了前台模块与后台Model的解耦！

实例代码

本实例主要展现了一个简单的列表操作，包括了添加，删除和修改，在使用knockoutjs实现它之后，使它的用户体验提升了一个台阶，对于代码的分层有了一个新的升华！

C#核心代码

  public ActionResult Index()

        {

            return View(new List<Product>

            {

                new Product{ID=,Name="test1"},

                new Product{ID=,Name="test2"},

                new Product{ID=,Name="test3"},

                new Product{ID=,Name="test4"},

                new Product{ID=,Name="test5"},

                new Product{ID=,Name="test6"},

            });

        }

JS核心代码

 var People = function () {

        this.ID = 0;

        this.Name = "";

    }

    var model = function () {

        self = this;

        self.PeopleList = ko.observableArray(@Html.Raw(Json.Encode(Model)));

        self.remove = function (o) { self.PeopleList.remove(o); };

        self.selectItem = ko.observable();

        self.editing = ko.observable(false);

        self.add = function (o) {

            self.editing(true);

            self.selectItem(new People());

        }

        self.edit = function (o) {

            self.editing(true);

            self.selectItem(o);

        }

        self.selectItem.subscribe(function (o) {

            //   alert("要编辑记录ID是" + o.ID);

        });

        self.save = function (o) {

            alert((o.ID > 0 ? "修改数据" : "新建数据") + o.Name);

        }

        self.cancle = function () {

            self.editing(false);

        }

    }

HTML核心代码

<h3>

    <a href="javascript:void(0)" data-bind="click:add">添加实体</a></h3>

<table>

    <thead>

        <tr>

            <th>编号</th>

            <th>姓名</th>

            <th></th>

        </tr>

    </thead>

    <tbody data-bind="template:{name:'list',foreach: PeopleList}">

    </tbody>

</table>

<script type="text/html" id="list">

    <tr>

        <td><span data-bind="text:ID"></span></td>

        <td><span data-bind="text:Name"></span>

        </td>

        <td><a href="javascript:void(0)" data-bind="click:$parent.remove">删除</a>

            <a href="javascript:void(0)" data-bind="click:$parent.edit">编辑</a>

        </td>

    </tr>

</script>

<fieldset data-bind="with:selectItem,visible:editing">

    <legend>正在<span data-bind="if:ID==0">新建</span><span data-bind="if:ID>0">编辑</span></legend>

    姓名：

    <input type="text" data-bind="value:Name" />

    <input type="button" data-bind="click:$parent.save" value="保存" />

    <input type="button" data-bind="click:$parent.cancle" value="取消" />

</fieldset>

运行效果图：

aaarticlea/png;base64,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" alt="" />

$.when实现方法回调

下面介绍JQ里的一个小功能，$.when($.ajax({})).done().done()....，它可以方便的实现方法的回调，done()代码块相关于ajax里的success节点里的内容，将代码从success节点拿出来，放到done()里，它可以使代码的层次感和可能性更强！

   $.when($.ajax({

        url: "/home/getProduct",

        dataType: "JSON",

        type: "GET",

        success: function (data) {

            alert(JSON.stringify(data));

        }

    })).done(function () { alert("哈哈，回调成功了！"); })

       .done(function () { ko.applyBindings(new model()); });

返回目录