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

返回目录

MVC与MVVM的模型

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

实例代码

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

C#核心代码

MVVM架构~knockoutjs与MVC配合,实现列表的增删改功能
  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"},
            });
        }
MVVM架构~knockoutjs与MVC配合,实现列表的增删改功能

JS核心代码

MVVM架构~knockoutjs与MVC配合,实现列表的增删改功能
 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);
        }
    }
MVVM架构~knockoutjs与MVC配合,实现列表的增删改功能

HTML核心代码

MVVM架构~knockoutjs与MVC配合,实现列表的增删改功能
<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>
MVVM架构~knockoutjs与MVC配合,实现列表的增删改功能

运行效果图:

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

$.when实现方法回调

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

MVVM架构~knockoutjs与MVC配合,实现列表的增删改功能
   $.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()); });
MVVM架构~knockoutjs与MVC配合,实现列表的增删改功能

 返回目录

MVVM架构~knockoutjs与MVC配合,实现列表的增删改功能,布布扣,bubuko.com

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

上一篇:javascript 闭包


下一篇:log4j2扩展日志输出功能