Knockout.js随手记(1)

时间 2019-11-11

标签 knockout.js knockout 随手栏目 JavaScript 繁體版

原文原文链接

新的开始，knockout.js

1.首先去http://knockoutjs.com/index.html下载knockout.js，最新的版本是2.3javascript

2.知道什么是Knockout？它是个JavaScript library，帮助建立丰富的显示和编辑器UI，经过干净的底层数据模型。你能够在任什么时候候动态更新UI的选择部分。html

3.知道knockoutjs的实现原理[MVVM模式]java

MVVM的优势

MVVM已在微软WPF/Silverlight/WP7中普遍应用，和MVC模式同样，主要目的是分离视图（View）和模型（Model），有几大优势web

1. 低耦合。视图（View）能够独立于Model变化和修改，一个ViewModel能够绑定到不一样的"View"上，当View变化的时候Model能够不变，当Model变化的时候View也能够不变。

2. 可重用性。你能够把一些视图逻辑放在一个ViewModel里面，让不少view重用这段视图逻辑。

3. 独立开发。开发人员能够专一于业务逻辑和数据的开发（ViewModel），设计人员能够专一于页面设计，使用Expression Blend能够很容易设计界面并生成xaml代码。

4. 可测试。界面素来是比较难于测试的，而如今测试能够针对ViewModel来写。

简单的说，在MVVM里，UI操做涉及的数据被包装成ViewModel，接着在UI输入/显示元素分别标注其对应到ViewModel某个属性值。当程式码改变ViewModel属性值，其对应的输入/显示栏位元素便会自动更新；而在UI栏位填入不一样内容，ViewModel的资料属性也会马上被修改成新值。这种双向绑定(Two-Way Binding)的概念，若使用传统作法得在ViewModel的属性修改事件将新值反映到某个显示/输入元素上，还得拦截输入元素的onChange事件，用程式将最新输入结果反应到ViewMode属性上，琐碎的实作细节蛮多的。而不论是Silverlight/WPF或JavaScript，MVVM程式库的目标即在节省前述自行开发的工夫，只需在显示/输入元素上注明其对应的ViewModel属性，以后所有交给knockout.js库自动处理，让程式开发者能优雅地实现MVVM。浏览器

knockout.js的主要特点为：

声明式语法：透过DOM元素属性宣告完成数据绑定，简洁方便
自动UI更新：只要产品型号资料改变，UI当即反映
依赖性追踪：源头数据变更时，可自动追溯全部关连的数据一块儿改变
支持模板：开放自订模板决定数据输出结果，可知足自定义需求
免费，开源纯JavaScript的 - 可跟jQuery的或其余JavaScript框架兼容，缩小的版本只有40KB，HTTP压缩后只有14KB跨浏览器！支持IE6+, FF2, Chrome, Opera, Safariapp

官方网站提供了友好的互动式的在线入门教程，能够去http://learn.knockoutjs.com/练习以及查看详细的API文档。框架

开始使用Knockout.js

　　有时候若是你没有使用代理去访问官网或者相关网站的时候，可能打不开等等，那么最容易得到knockout.js的方式就是使用管理NuGet程序包工具进行自动安装编辑器

引入konckout.js包后，咱们接着写几行代码就能够尝试下MVVM的优秀特性ide

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>konckout学习系列</title>
    <script src="Scripts/knockout-2.3.0.debug.js"></script>
</head>
<body>
    输入值：<input type="text" id="txtValue" data-bind="value: myValue" /><br/>
    响应文本：<span id="spnValue" data-bind="text: myValue"></span>
    <script type="text/javascript">
        var myViewModel =
        {
            myValue: ko.observable("Halower")
        }
        ko.applyBindings(myViewModel);
    </script>
</body>
</html>

能够看到，咱们几乎都没写什么，完成了自动的感应和数据的绑定。工具

1.只定义了一个 myViewModel组件对象（包含一个myValue的属性）。

2.经过data-bind="value: myValue"将myValue属性绑到<input>的value值。

3.经过data-bind="text: myValue"将属性值动态的反映到<span>中。

因为本例未引用jQuery，无$.ready()可用，因此把<script>放在网页的最后以确保在网页元素都载入后才执行ko.applyBindings( )。

试着改变<input>的值，可发现<span>会立刻反应修改后的结果，能够看出已经自动的检测了onchange时间了，果真很强悍！

微软在往后的VS版本中，只要是好的，免费的，开源的，都会集成进来替他卖力，并且从MVC4中开始提出了SPA的概念，也就是说knockout.js不就就会成为微软的得力帮手。

PS：ASP.NET Single Page Application (SPA) helps you build applications that include significant client-side interactions using HTML 5, CSS 3 and JavaScript. It’s now easier than ever before to getting started writing highly interactive web applications.

备注：

本文版权归你们共用，不归本人全部，全部知识都来自于官网支持，书本，国内外论坛，大牛分享等等......后续将学习knockout.js的经常使用功能。