代码改变世界

Knockoutjs自学记录（一）~本地新建展示实例

2015-06-16 15:31  妙笔生花  阅读(268)  评论(0)  编辑  收藏  举报

工作中使用Less，而Knockoutjs用不用随意时，对其进行了一个初步了解，并做了一个小实例展示数据（未用到后台代码，数据对象模拟var obj={key:value}）。

一、介绍：

　　Knockoutjs，简称Ko，是一个轻量级的MVVM框架，通过简易的UI绑定语法，可达到动态更新UI的效果。

　　轻量级：相对重量级而言，对容器依赖较小、占用较小。

       MVVM： Model View ViewModel的缩写。

     其特点：

　　　　1、声明式绑定：通过简易的data-bind语法，可将Dom元素与ViewModel关联。

　　　　2、UI自动更新：当ViewModel状态更新时，自动更新UI界面。

　　　　3、依赖跟踪： 在模型与数据之间建立隐式关系链。

　　　　4、模块化： 每个模块完成一个特定的子功能，所有的模块按某种方法组装起来，成为一个整体，完成整个系统所要求的功能。

　　　　5、免费、开源、基于MIT许可证。

　　　　6、纯JavaScript实现，可以与任何Web框架集成。

　　　　7、小巧，支持所有主流浏览器（IET6+ /Firefox 2+ /Chrome /Opera /Safari）PC/Mobile。

　　　　8、完善的文档，包括API、在线实例、教程。

二、下载Knockoutjs文件

　　从http://knockoutjs.com/下载（示例文件knockout-3.3.0.js）

三、简易html+js代码编写(代码等需分离)

　 1、新建目录结构

        demo

　　　    css

　　　    js

　　　　      knockout-3.3.0.js

            index.html　

　2、index.html源码

　

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>KnockoutJs学习示例</title>
  <!-- CSS Here-->
 </head>
 <body>
    1、<span data-bind="text:helloWorld"></span>
    <br/>
    2、<span data-bind="value:helloWorld"></span>
    <br/>
    3、<input data-bind="value:remark" />
    <br/>
    4、<input data-bind="text:remark" />
    <br/>
    <!-- 
        备注： 在KO中渲染对象至页面时，使用data-bind进行取值。
        其中
        如果是文本标签，那么表示为 data-bind="text:选取键名"；
        如果是文本域等标签，那么表示为 data-bind="value:选取键名"；
        若用反了，不会报错，只会无数据~

    -->
    <!-- JavaScript Files Here -->
    <script type="text/javascript" src="/js/knockout-3.3.0.js"></script> 
     
    <script type="text/javascript"> 
        var ViewModel = {
            helloWorld: '键值对方式存储展示内容，此处键为helloWorld',
            remark: 'Good!!!'
        }
        ko.applyBindings(ViewModel);
    </script> 
 </body>
</html>