初的起始,knockout.js

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

2.明白呀是Knockout?它是单JavaScript
library,帮忙成立丰裕的显得与编制器UI,通过干净的脚数据模型。你可以其余时刻动态更新UI的挑选有。

3.精晓knockoutjs的贯彻原理[MVVM模式]

图片 1

 

MVVM的优点

MVVM已在微软WPF/Silverlight/WP7中广选用,和MVC形式一样,重要目标是分开视图(View)和模型(Model),有几大亮点

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的材料性也会面那被修改为新值。 style=”font-family: 甲骨文; font-size: 18px;”>这种双向绑定(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, Safari

官方网站提供了友好的互动式的在线入门教程,可以错过http://learn.knockoutjs.com/练和查看详细的API文档

图片 2

 

始发使用Knockout.js

  有时候要您从未应用代理去顾官网或相关网站的当儿,可能于不起先等等,那么最好容易拿到knockout.js的艺术就是是行使管理NuGet程序包工具举办机动安装

图片 3

引入konckout.js包后,我们跟着写几推行代码就得尝试下MVVM的帅特性

<!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/>
    响应文本:
    <script type="text/javascript">
        var myViewModel =
        {
            myValue: ko.observable("Halower")
        }
        ko.applyBindings(myViewModel);
    </script>
</body>
</html>

图片 4

足见到,我们几乎都不曾写啊,完成了自行的反应和数码的绑定。

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的常用功效。

相关文章

网站地图xml地图