knockout.js实例三~可编辑列表（结合Web Api）

来源：互联网发布：淘宝事件营销的案例编辑：程序博客网时间：2024/06/03 21:23

knockout.js实例三~可编辑列表（结合 Web Api）

这次的实例与之前的实例最大的区别就是结合了Web Api，另外的就是在项目中经常会使用到的对数据的新增修改删除功能，此次实例中的Web Api部分是我之前的一篇博文： http://blog.csdn.net/zhanxueguang/article/details/46821511 , 其中讲到的最主要的一个问题就是在Web面向服务编程中经常会遇到的跨域资源共享的解决方案。

老样子，还是先上代码吧，然后再一步步分析：

Html Code:

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>Editable Grid</title>    <link rel="stylesheet" href="../css/bootstrap.min.css"/></head><body>    <script type="text/html" id="goodItemList">        <tr>            <td data-bind="text: Id"></td>            <td>                <input class="form-control input-sm" type="text" data-bind="value: Name"/>            </td>            <td>                <input class="form-control input-sm" type="text" data-bind="value: Price"/>            </td>            <td>                <a class="btn btn-info btn-sm" href="#" data-bind="click: $root.saveSingle">保存</a>                <a class="btn btn-danger btn-sm" href="#" data-bind="click: $root.deleteGood">删除</a>            </td>        </tr>    </script>    <hr/>    <div class="container">        <div class="row">            <a class="btn btn-primary btn-sm" href="#" data-bind="click: addGood">添加</a>            <table class="table table-hover table-bordered table-responsive">                <thead>                <tr>                    <th>商品编号</th>                    <th>名称</th>                    <th>价格</th>                    <th>操作</th>                </tr>                </thead>                <tbody data-bind="template:{name: 'goodItemList', foreach: goodItems}">                </tbody>            </table>        </div>    </div>    <script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>    <script type="text/javascript" src="../js/knockout-3.3.0.js"></script>    <script type="text/javascript" src="../models/goodModel.js"></script>    <script type="text/javascript" src="../viewModels/editableGrid.js"></script></body></html>

ViewModel Code:

var baseUrl = 'http://localhost:5267/api/good';function viewModel(){    var self = this;    self.goodItems = ko.observableArray();    self.loadGoodItems = function () {        $.ajax({            url : baseUrl,            type : 'GET',            contentType: "application/json; charset=utf-8",            success : function (data) {                self.goodItems(                    ko.utils.arrayMap(data,                        function (good) {                            return new goodModel(good.Id, good.Name, good.Price);                        }                    )                );            }        });    };    self.addGood = function () {        self.goodItems.push(new goodModel('','',''));    };    self.saveSingle = function (good) {        var method = 'POST';        var url = baseUrl;        if(good.Id() != ''){            method = 'PUT';            url += '/' + good.Id();        }        $.ajax({            url: url,            type: method,            dataType: "json",            data: ko.toJS(good)        }).done(function () {            self.loadGoodItems();        });    };    self.deleteGood = function (good) {        if(good.Id() == ''){            self.goodItems.remove(good);        }else{            $.ajax({                url:baseUrl+'/'+good.Id(),                type: 'DELETE'            }).done(function () {                self.loadGoodItems();            });        }    };    self.loadGoodItems();}ko.applyBindings(new viewModel());

分析：

首先我们可以看到，在 Html Code 中，声明了一个名为 goodItemList 的模板，里面的内容较为简单，分别绑定了商品的编号，名称与价格，以及对单个商品的编辑保存，删除操作。
绑定较为简单，因为这个例子的侧重点并不在此。

然后我们来看 ViewModel Code:

变量 baseUrl 保存了 Api 的调用路由地址，我们在 ViewModel 中声明了 goodItems 用以保存商品列表，然后定义了分别对应查询，新增，编辑，删除四个功能的 loadGoodItems,
addGood, saveSingle, deleteGood 的四个函数，或许你会问，为什么没有看到处理跨域资源访问的代码，请先移步： http://blog.csdn.net/zhanxueguang/article/details/46821511 , 这个里面对Web Api的跨域资源共享有部分解释。方法内部实现不难，贴出来主要是为了和之前发的博文想对应，
之前那篇博文的产生也是因为写这个实例的情景下写的。

1 0