• KO学习重点


    总结了一些knockout知识点

    绑定模型
    ko.applyBindings(viewModel);//全局应用
    ko.applyBindings(viewModel, DOM元素);//局部应用

    赋值
    var vModel={

    this.firstName=ko.observable();
    };
    vModel.firstName();
    vModel.firstName("newValue");

    订阅改动事件
    vModel.firstName.subscribe();
    vModel.firstName.subscribe(function(newValue){alert("Changed: "+newValue);});

    删除订阅
    var subscription=vModel.firstName.subscribe(function(newValue){});
    subscription.dispose();

    ko.computed用法1(传入this的方式)
    var vModel={
             this.firstName=ko.observable();
             this.lastName=ko.observable();
             this.fullName=ko.computed(function(){
                                                                            return this.firstName()+" "+ this.lastName();
                                                                    }, this);//需要注意这个this的传入
    };

    ko.computed用法1(不传入this的方式)
    function viewModel()

    {
             var self=this;//关键点
             self.firstName=ko.observable();
             self.lastName=ko.observable();
             self.fullName=ko.computed(function(){
                                                                            return self.firstName()+ " "+ self.lastName();
                                                                   });
    }


    //对于ko.computed属性的读写分离写法
    this.fullName=ko.computed({
                                                 read:function(){return xxxxxxxxxxx;},
                                                 write:function(value){//分解value,保存到firstName, lastName},
                                                 owner: this
                                             }); 

    判断模型属性的几个函数
    ko.isComputed

    ko.isObservable

    ko.isWritableObservable

    KO模版:foreach
    <table>
    <tbody data-bind="foreach: people">
         <tr>
              <td data-bind="text: firstName"></td>
              <td data-bind="text: lastName"></td>
         </tr>
    </tbody>
    </table>
    <script>
                   var peopleList=ko.observableArray([
                                                                               {firstName:"xxxx1", lastName:"yyyyyy1"},
                                                                               {firstName:"xxxx2", lastName:"yyyyyy2"}
                                                                       ]);
                   var vModel= {
                                                                       people=ko.observableArray(peopleList)
                                      };
                   ko.applyBindings(vModel);
    </script>

    foreach的as用法,犹如asp.net中的多个repeater,就是定义一个别名

    foreach的注释循环写法

    foreach的AOP,(加入效果,jQuery),就是模版方法的before, after等之类的前后事件的处理

    模版:  if: 变量名,没有容器的写法(注释写法)

    <!-- ko if: someExpressionGoesHere -->
    <!-- /ko -->
    <!-- ko foreach: items -->
    <!-- /ko -->

    with用法,和vb中的一样的目的

    阻止事件的向上传递: clickBubble:false
    data-bind="click: fnName, clickBubble:false"

    form的submit能检测到回车事件,因此不用click事件
    <form data-bind="submit: validateInput">
                xxx
                <input type="submit" value="OK"/>
    </form>

    模型属性的实时跟踪
    data-bind="value: v1, valueUpdate:'afterkeydown'"

    自定义Binding

    JSON
    ko.toJS,将observable的模型拷贝成没有observable的js对象
    ko.toJSON,调用ko.toJS,然后利用浏览器本身的JSON.serialize函数把js对象转换为json字符串
    如果浏览器不支持本地JSON,则需要引用json2.js,才能让ko.toJSON函数正常


    从server得到json数据后的操作:
    var parsed = JSON.parse(someJSON);
    vModel.firstName(parsed.firstName);

    正在解读ko的源码中,敬请期待。。。哈哈

  • 相关阅读:
    使用超酷的jQuery缩略图生成插件NailThumb制作漂亮的缩略图web应用
    极客Web前端开发资源大荟萃#015
    极客编程小挑战#29:实现手机上常见的某一功能的效果显示
    在线制作gif loading图
    极客标签二重大礼华丽登场 宅男宅女必备套装
    SVG矢量图形课程基础入门篇
    浏览器JS交互,点击查询
    11选5专家投注研究算法
    大龙VBox API参数插件
    利用DLL劫持内存补丁技术注入
  • 原文地址:https://www.cnblogs.com/aarond/p/knockout.html
Copyright © 2020-2023  润新知