中文字幕精品亚洲无线码二区,国产黄a三级三级三级看三级,亚洲七七久久桃花影院,丰满少妇被猛烈进入,国产小视频在线观看网站

MVVM架(jia)構~knockoutjs與MVC配合,實現列(lie)表的增刪(shan)改(gai)功能

返回目錄

MVC與MVVM的模型

在MVC實(shi)例(li)項目中(zhong),為我(wo)們提(ti)供了(le)簡(jian)單的(de)(de)(de)(de)增(zeng)刪改(gai)查功(gong)能,而(er)這種功(gong)能的(de)(de)(de)(de)實(shi)現與(yu)具體(ti)的(de)(de)(de)(de)Model很有關(guan)系(xi),或(huo)者(zhe)說(shuo)(shuo)它(ta)與(yu)后臺(tai)數據庫(ku)的(de)(de)(de)(de)關(guan)系(xi)過于(yu)緊(jin)密了(le),而(er)對于(yu)開發人員來說(shuo)(shuo)當頁面(mian)布局修(xiu)改(gai)后,也會現時修(xiu)改(gai)它(ta)們的(de)(de)(de)(de)Model部(bu)分,而(er)對于(yu)MVVM思想體(ti)系(xi)來說(shuo)(shuo),它(ta)可以不去修(xiu)改(gai)后臺(tai)Model,而(er)后采用了(le)一種前臺(tai)綁(bang)定的(de)(de)(de)(de)方(fang)式(shi),很好的(de)(de)(de)(de)實(shi)現了(le)前臺(tai)模塊與(yu)后臺(tai)Model的(de)(de)(de)(de)解耦!

實例代碼

本實例主要展現(xian)(xian)了(le)一(yi)個(ge)簡單的(de)(de)(de)列表操作(zuo),包括了(le)添加,刪除和修(xiu)改,在(zai)使用knockoutjs實現(xian)(xian)它(ta)之后,使它(ta)的(de)(de)(de)用戶體驗提升了(le)一(yi)個(ge)臺階,對于代碼的(de)(de)(de)分層有了(le)一(yi)個(ge)新(xin)的(de)(de)(de)升華!

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("要編輯記(ji)錄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>
    姓(xing)名:
    <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里(li)的一個小(xiao)功能(neng),$.when($.ajax({})).done().done()....,它可(ke)以方便的實(shi)現方法的回調(diao),done()代(dai)碼塊相(xiang)關于ajax里(li)的success節(jie)(jie)點里(li)的內容,將代(dai)碼從success節(jie)(jie)點拿出來(lai),放到(dao)done()里(li),它可(ke)以使(shi)代(dai)碼的層次感和可(ke)能(neng)性更強!

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

 返回目錄

posted @ 2014-03-06 15:47  張占嶺  閱讀(4130)  評論(3)    收藏  舉報