按钮绑定Knockoutjs快速入门

新手发帖，很多方面都是刚入门，有错误的方地请大家见谅，欢迎批评指正

    Knockoutjs是一个JavaScript实现的MVVM框架。主要有如下几个能功：

    1. Declarative bindings

    2. Observables and dependency tracking

    3. Templating

    

1. 它对于分离前台的业务逻辑和图视简化数据绑定程过有著显的用作。闲言少叙，直接看例子，如何下载也不说了，如果用VS开辟的话用Nuget就可以一键搞定。

2. 1. 基本绑定和依附踪跟

    首先须要定义一个ViewModel:

    <

    script

    type

    ="text/javascript"> function

    ViewModel() {

    this

    .firstName =

    "Zixin"

    ;

    this

    .lastName =

    "Yin"

    ; }

    </

    script

    >

    

    然后是一个用来示显这个ViewModel的View：

    <

    div

    > <

    p

    data-bind

    ="text: firstName"></

    p

    > <

    p

    data-bind

    ="text: firstName"></

    p

    > <

    input

    data-bind

    ="value: firstName"/> <

    input

    data-bind

    ="value: lastName"/> </

    div

    >

    

 

    从这个view中可以看到声明式绑定的含意，只须要在标签上应用data-bind属性，就可以将数据的值绑定到应相的方地。有了View和ViewModel还须要代码将这两者关联起来：

    ko.applyBindings(

    new

    ViewModel());

    

 

    将他们放到起一，注意，applyBinding那代码必须在页面部全加载完以后行执。页面示显为:

    

    面下再看observables，这个能功不是与生俱来的，必须要把View Model置设为observable，法方如下:

    function

    ViewModel() {

    this

    .firstName = ko.observable(

    "Zixin"

    );

    this

    .lastName = ko.observable(

    "Yin"

    ); }

    

    其他都不须要变改，这时候，如果变改输入框中的值，当核心开离的时候，可以发明p中的值也着跟变改了：

    

    面下再看dependency tracking,也就是如果一个值依附多各值,其中任何一个值生发变更,它会都动自生发变更. 这是通过computed法方实现的,代码如下:

    function

    ViewModel() {

    this

    .firstName = ko.observable(

    "Zixin"

    );

    this

    .lastName = ko.observable(

    "Yin"

    );

    this

    .fullName = ko.computed(

    function

    () {

    return this

    .lastName() +

    " "

    +

    this

    .firstName(); },

    this

    ); }

    

    注意取得一个observable的值是一个函数调用。这样当first 或者last name生发更变的时候fullName也会动自着跟更变。

    

    也可以通过代码变改observable的值，页面会动自新刷：

    function

    ViewModel() {

    //………

    this

    .capitalizeLastName =

    function

    () {

    this

    .lastName(

    this

    .lastName().toUpperCase()); } }

    

    在页面上添加一个按钮:

    <

    button

    data-bind

    ="click: capitalizeLastName">

    Caps

    </

    button

    >

    点击按钮以后便会动身viewmodel的capitalizeLastName法方，要变改一个observable的值的法方就是将新值作为函数调用的参数。点击以后：

    每日一道理
信念是巍巍大厦的栋梁，没有它，就只是一堆散乱的砖瓦；信念是滔滔大江的河床，没有它，就只有一片泛滥的波浪；信念是熊熊烈火的引星，没有它，就只有一把冰冷的柴把；信念是远洋巨轮的主机，没有它，就只剩下瘫痪的巨架。

    

 

    

2. 表列绑定

    参加我们有如下的订单ViewModel,应用observableArray来踪跟组数的变更。

    var

    products=[{name:

    "Thinkpad X1"

    ,price:9000}, {name:

    "Hp ProBook"

    ,price:5555}, {name:

    "Mouse"

    ,price:45} ];

    function

    Order() {

    var

    self =

    this

    ; self.items = ko.observableArray([

    //This data should load from server

    new

    Item(products[0], 1),

    new

    Item(products[1],2)]); self.price = ko.computed(

    function

    () {

    var

    p=0;

    for

    (

    var

    i = 0; i < self.items().length; i++) {

    var

    item = self.items()[i]; p += item.product.price * item.amount(); }

    return

    p; }, self); }

    Order里头的Item实际上应该是从服务器取得的，Item定义如下:

    function

    Item(product, amount) {

    var

    self =

    this

    ;

    this

    .product = product;

    this

    .amount = ko.observable(amount);

    this

    .subTotal = ko.computed(

    function

    () {

    return

    self.amount() * self.product.price; }, self); }

    

 

    ViewModel准备好以后，就可以实现View。次这须要应用foreach绑定，如下:

    <

    table

    > <

    thead

    > <

    tr

    > <

    td

    >

    Name

    </

    td

    > <

    td

    >

    Amount

    </

    td

    > <

    td

    >

    Price

    </

    td

    > </

    tr

    > </

    thead

    > <

    tbody

    data-bind

    ="foreach: items"> <

    tr

    > <

    td

    data-bind

    ="text: product.name"></

    td

    > <

    td

    ><

    select

    data-bind

    ="options:[1,2,3,4,5,6],value: amount"></

    select

    ></

    td

    > <

    td

    data-bind

    ="text: subTotal"></

    td

    > </

    tr

    > </

    tbody

    ></

    table

    ><

    h3

    >

    Order Price:

    <

    span

    data-bind

    ="text: price"></

    span

    ></

    h3

    >

    

 

    这样一个基本的订单页面就好了，可以选择数量，价格会动自更新：

    

    面下给订单加上增删品产的能功,先给Order加上如下的法方:

    function

    Order() { //

    ……

    self.remove =

    function

    (item) { self.items.remove(item); } self.addMouse =

    function

    () { self.items.push(

    new

    Item(products[2],1)); } }

    

 

    给表格加上一列删除按钮：

    <

    td

    ><

    a

    href

    ="#"

    data-bind

    ="click: $root.remove">

    Remove

    </

    a

    ></

    td

    >

    

    再在表格底部加上一个增长品产的按钮:

    <

    button

    data-bind

    ="click: addMouse">

    Add a Mouse

    </

    button

    >

    

 

    这时候，observableArray的能功就现体了，当你点击删除按钮或者底部的按钮的时候，页面节点会着跟变更，而不须要手动更新DOM节点，这使得前端的JS大大简化。

    

文章结束给大家分享下程序员的一些笑话语录： 程序员喝酒
　　我偶尔采用“木马策略”、“交叉测试”，时间不长就开始“频繁分配释放资源”，“cache”也是免不了的了，
　　不过我从不搞“轮巡”，也不会“捕获异常”，更不会“程序异常”，因为我有理性
克制的。