knockoutJS用法

ko中的 data-bind属性

• text 和 inputText
  text，顾名思义就是文本的意思，这个绑定属性一般用于<label>、<span>、<div>等标签显示文本
  inputText，input标签的文本，相当于input标签的value属性

    　<div> 
        姓名：<label data-bind="text:Name"></label><br />
        职业：<input type="text" data-bind="textInput:Profession" />
      </div>

        //1.定义ViewModel
        var myViewModel = {
            Name: ko.observable("Lilei"),
            Profession: "软件工程师",
        };

        //2.激活绑定
        ko.applyBindings(myViewModel);

• value
  这个绑定属性一般用于input标签，和上面的inputText基本相似。只不过value更加规范。
  和value一起使用的还有一个参数valueUpdate，它表示界面做一个什么操作的时候更新该value。valueUpdate主要取值有change/keyup/keypress/afterkeydown等。分别表示文本变化、键盘缩起、键盘按下、键盘按下之后等操作时候更新value对应的viewmodel的值。

姓名：<input type="text" data-bind="value:Name,valueUpdate:'keyup'" /><br />

　　var myViewModel = {
            Name: ko.observable("Lilei"),
        };//2.激活绑定
        ko.applyBindings(myViewModel);

上述代码表示键盘收起的时候更新文本框的value属性和myViewModel的Name属性。

JSON对象和监控属性的转化及关系

我们知道，为了避免不同语言直接的展现方式，一般情况下我们前端和后端交互的时候统一使用Json格式的数据，我们通过http请求从后端取到的数据模型，而要使用我们的ko的一些特性，必须要将这些普通的数据模型转换成ko的监控属性；反过来，我们使用ko的监控属性，有时又需要把这些属性转换为普通的json数据传到后台，那么如何实现这个转换呢？

JSON对象转换成ViewModel

比如我们从后台取到一个Json对象，然后把它变成到我们的viewmodel，然后绑定到我们的界面DOM。

         $.ajax({
                url: "/Home/GetData",
                type: "get",
                data: {},
                success: function (data, status) {
                    var oJson = data;
                }
            });

我们发送一个请求到后端，取到一个json对象，赋值到oJson，然后我们把oJson转换成viewmodel，最直观的方式就是手动转换了。比如我们可以这样：

　var myViewModelJson = {
            DeptName: ko.observable(),
            DeptLevel: ko.observable(),
            DeptDesc:ko.observable()
        };
        ko.applyBindings(myViewModelJson);

然后在ajax请求的success里面

 success: function (data, status) {
                    var oJson = data;
                    myViewModelJson.DeptName(oJson.DeptName);
                    myViewModelJson.DeptLevel(oJson.DetpLevel);
                    myViewModelJson.DeptDesc(oJson.DeptDesc);
                }

这样，通过手动绑定，实现了json对象到viewmodel的绑定。这样做的好处就是灵活，坏处显而易见，手工代码量太大。

还好，有我们万能的开源，总有人想到更好的办法，我们使用knockout.Mapping组件就能很好地帮助我们界面json对象到viewmodel的转换。
knockout.Mapping开源地址：下载
下面来简单看看它如何使用，还是上面的例子，我们不用实现定义任何viewmodel，首先需要引用knockout.mapping.js

 <script src="~/scripts/knockout/knockout-3.4.0.min.js"></script>
    <script src="~/scripts/knockout/extensions/knockout.mapping-latest.js"></script>

注意：这里knock.mapping-lastest.js必须要放在knockout-3.4.0.min.js的后面，否则调用不到ko.mapping
然后直接在success函数里面这样使用

success: function (data, status) {
                    var myViewModelJson2 = ko.mapping.fromJS(data);
                    ko.applyBindings(myViewModelJson2);
                }

ko 将json对象转换成viewModel
代码释疑：通过ajax请求从后台取到的json对象，通过ko.mapping.fromJS()，很方便地将其转换成了viewmodel，是不是猴犀利！当然除了这种用法，还可以更新已经存在viewmodel，使用如下：

var myViewModelJson = {
            DeptName: ko.observable(),
            DeptLevel: ko.observable(),
            DeptDesc:ko.observable()
        };
        ko.applyBindings(myViewModelJson);
        $(function () {
            $.ajax({
                url: "/Home/GetData",
                type: "get",
                data: {},
                success: function (data, status) {
                    ko.mapping.fromJS(data, myViewModelJson)
                }
            });
        });

在success里面，根据data的值去更新myViewModelJson这个viewmodel。

ViewModel转换成JSON对象

上面说了JSON对象转化为viewmodel，那么反过来，如果我们需要将viewmodel转换为Json对象传递到后端，怎么办呢？

knockout里面提供了两个方法：

• ko.toJS()：将viewmodel转换为JSON对象
• ko.toJSON()：将viewmodel转换为序列化过的Json string

 $(function () {
            var oJson1 = ko.toJS(myViewModelJson);
            var oJson2 = ko.toJSON(myViewModelJson);
        });
        var myViewModelJson = {
            DeptName: ko.observable("研发部"),
            DeptLevel: ko.observable("2"),
            DeptDesc: ko.observable("开发一伙人")
        };
        ko.applyBindings(myViewModelJson);

那么我们来监控下oJson1和oJson2的值：

ko 将viewModel转换成JSON对象传到后台

代码释疑：通过上面这张图，很容易理解两个方法的区别，这里需要说明一点的是，这两个方法是ko自带的，并不需要mapping组件的支持

借鉴 https://www.cnblogs.com/zxbzl/p/6000642.html