knockoutJS用法

ko中的 data-bind属性

  • text 和 inputText
    text,顾名思义就是文本的意思,这个绑定属性一般用于
     
姓名:
职业:
        //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的值。
姓名:
  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

 
    

注意:这里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);
                }

knockoutJS用法_第1张图片
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的值:

knockoutJS用法_第2张图片
ko 将viewModel转换成JSON对象传到后台

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

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

你可能感兴趣的:(knockoutJS用法)