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

返回目录

MVC与MVVM的模型

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

实例代码

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

C#核心代码

  public ActionResult Index()

        {

            return View(new List<Product>

            {

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

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

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

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

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

                new Product{ID=6,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>

运行效果图：

$.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()); });

 返回目录