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

最新推荐文章于 2019-05-25 14:48:36 发布

Rajesh_James

最新推荐文章于 2019-05-25 14:48:36 发布

阅读量1.9k

点赞数 3

分类专栏： MVVM 文章标签： knockoutJs

本文链接：https://blog.csdn.net/zhanxueguang/article/details/46867975

版权

MVVM 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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的跨域资源共享有部分解释。方法内部实现不难，贴出来主要是为了和之前发的博文想对应，
之前那篇博文的产生也是因为写这个实例的情景下写的。