码迷,mamicode.com
首页 > 其他好文 > 详细

Knockout快速扫盲

时间:2016-01-06 21:30:49      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:

 1、Knockout.js是什么?

      Knockout是一款很优秀的js库,它可以快速让你使用一个干净整洁的底层数据模型,即可创建一个富文本且具有良好显示和编辑功能的用户界面。任何时候你的ui需要自动更新,ko都能自动帮你快速实现,而且使用非常的简单。

     技术分享

 2.重要特性

    优雅的依赖追踪--不管任何时候你的数据模型更新,都会更新到相应到内容

    声明式绑定--简单的声明方式将你的用户界面指定部分关联到你的数据模型上。

    一个简单的数据绑定demo

<body>
The name is <span data-bind="text: lastName"></span>
<script type="text/javascript">
//数据源 一般是js对象
var AppViewModel = {
firstName: ko.observable(‘Bob111‘)
}
//绑定数据源
ko.applyBindings(AppViewModel);

</script>
</body>

 

 

 表格绑定的例子

<body>
    <table>
        <thead>
            <tr><th>First name</th><th>Last name</th></tr>
        </thead>
        <tbody data-bind="foreach: people">
            <tr>
                <td data-bind="text: firstName"></td>
                <td data-bind="text: lastName"></td>
            </tr>
        </tbody>
    </table>

    <script type="text/javascript">
        var array = {
            people: [
            { firstName: Bert, lastName: Bertington },
            { firstName: Charles, lastName: Charlesforth },
            { firstName: Denise, lastName: Dentiste }
            ]
        }
        ko.applyBindings(array);
    </script>
</body>

 绑定主要分为几大块,分别是:

  1.控制文本和外观的绑定 比如:text ,visible,html,css,style....

  2.控制流的绑定 比如上面的foreach,if,with..

   3.表单域绑定  比如 Event,enable,checked,option...

   我觉得ko的最常用的就是数据绑定,一般事件的话,可以用jq控制

  mapping插件

   如果遇到页面字段较多的数据绑定情况下,重复体力活会很大,利用mapping可以消除这些重复繁杂的代码。

   其他高深的技术...还有待研究

    思考?

    相比之下普通的数据绑定有什么缺点?

    普通的数据绑定和后端结合非常密切,页面复杂难以维护,不好扩展,后端数据变化不能及时响应到ui。通过引入ko,可以将后端和前端做一层隔离,并且增强交互时效性。

     jq复杂操作界面元素和事件,ko解决数据绑定。它们紧紧只是实现页面效果。接下来,还需要真正的学习前端框架,各种常用的组件的学习。通过框架+各种实现的效果才能打造炫裤无比的前端。加油!!

 

Knockout快速扫盲

标签:

原文地址:http://www.cnblogs.com/JaggerMan/p/5106748.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!