• Knockout快速扫盲


     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解决数据绑定。它们紧紧只是实现页面效果。接下来,还需要真正的学习前端框架,各种常用的组件的学习。通过框架+各种实现的效果才能打造炫裤无比的前端。加油!!

  • 相关阅读:
    Codeforces Round #648 (Div. 2) A~F题解
    2020杭电多校第四场 Go Running 最小点覆盖等于二分图最大匹配数
    2019徐州网络赛 M Longest subsequence 序列自动机
    后缀数组模板题总结
    2020 Multi-University Training Contest 1 . Fibonacci Sum 水题改编
    悬线法
    欧拉回路,欧拉路径
    LGV算法 CodeForces 348D + 牛客多校 A Monotonic Matrix
    Kattis mapcolouring(状压dp)
    mysql解决错误:ERROR 2013 (HY000): Lost connection to MySQL server at 'reading initial communication packet', system error: 0
  • 原文地址:https://www.cnblogs.com/JaggerMan/p/5106748.html
Copyright © 2020-2023  润新知