Knockout应用开发指南之绑定语法

第三章所有代码都需要启用KO的ko.applyBindings(viewModel);功能，才能使代码生效，为了节约篇幅，所有例子均省略了此行代码。

创新互联公司是专业的西湖网站建设公司，西湖接单;提供成都网站设计、成都网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行西湖网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

1 visible 绑定

目的

visible绑定到DOM元素上，使得该元素的hidden或visible状态取决于绑定的值。

例子

 
 
 
    
  
  
  
    2. 
  
  
  
  2.     You will see this message only when "shouldShowMessage" holds a true value. 
    3.
  •     var viewModel = {
  •         shouldShowMessage: ko.observable(true) // Message initially visible
  •     };
  •     viewModel.shouldShowMessage(false); // ... now it's hidden
  •     viewModel.shouldShowMessage(true); // ... now it's visible again

  • 参数

    主参数

    当参数设置为一个假值时(例如：布尔值false， 数字值0， 或者null， 或者undefined) ,该绑定将设置该元素的style.display值为none，让元素隐藏。它的优先级高于你在CSS里定义的任何display样式。

    当参数设置为一个真值时(例如：布尔值true，或者非空non-null的对象或者数组) ,该绑定会删除该元素的style.display值，让元素可见。然后你在CSS里自定义的display样式将会自动生效。

    如果参数是监控属性observable的，那元素的visible状态将根据参数值的变化而变化，如果不是，那元素的visible状态将只设置一次并且以后不在更新。

    其它参数

    无

    注：使用函数或者表达式来控制元素的可见性

    你也可以使用JavaScript函数或者表达式作为参数。这样的话，函数或者表达式的结果将决定是否显示/隐藏这个元素。例如：

     
 
 
      
  
  
  
    1.  0">
      2. 
  
  
  
    2.     You will see this message only when 'myValues' has at least one member. 
      3.
  •     var viewModel = {
  •         myValues: ko.observableArray([]) // Initially empty, so message hidden
  •     };
  •     viewModel.myValues.push("some value"); // Now visible

  • 依赖性

    除KO核心类库外，无依赖。

    2 text 绑定

    目的

    text 绑定到DOM元素上，使得该元素显示的文本值为你绑定的参数。该绑定在显示或者上非常有用，但是你可以用在任何元素上。

    例子

     
 
 
      
  
  
  
    1. Today's message is:   
      2. 
  
  
  
    2. 
  
  
  
      4. 
  
  
  
    4.     var viewModel = { 
      5. 
  
  
  
    5.         myMessage: ko.observable() // Initially blank 
      6. 
  
  
  
    6.     }; 
      7. 
  
  
  
    7.     viewModel.myMessage("Hello, world!"); // Text appears 
      8. 
  
  
  
    8.

    参数

    主参数

    KO将参数值会设置在元素的innerText (IE)或textContent(Firefox和其它相似浏览器)属性上。原来的文本将会被覆盖。

    如果参数是监控属性observable的，那元素的text文本将根据参数值的变化而更新，如果不是，那元素的text文本将只设置一次并且以后不在更新。

    如果你传的是不是数字或者字符串(例如一个对象或者数组)，那显示的文本将是yourParameter.toString()的等价内容。

    其它参数

    无

    注1：使用函数或者表达式来决定text值

    如果你想让你的text更可控，那选择是创建一个依赖监控属性(dependent observable)，然后在它的执行函数里编码，决定应该显示什么样的text文本。

    例如：

     
 
 
      
  
  
  
    1. The item is  today. 
      2. 
  
  
  
    2. 
  
  
  
    3. 
  
  
  
      5. 
  
  
  
    5.     var viewModel = { 
      6. 
  
  
  
    6.         price: ko.observable(24.95) 
      7. 
  
  
  
    7.     }; 
      8. 
  
  
  
    8. 
  
  
  
    9.     viewModel.priceRating = ko.dependentObservable(function () { 
      10. 
  
  
  
    10.         returnthis.price() >50?"expensive" : "affordable"; 
      11. 
  
  
  
    11.     }, viewModel); 
      12. 
  
  
  
    12.

    现在，text文本将在“expensive”和“affordable”之间替换，取决于价格怎么改变。

    然而，如果有类似需求的话其实没有必要再声明一个依赖监控属性(dependent observable)， 你只需要按照如下代码写JavaScript表达式就可以了：

     
 
 
      
  
  
  
    1. The item is  50 ? 'expensive' : 'affordable'"> today.
      2.

    结果是一样的，但我们不需要再声明依赖监控属性(dependent observable)。

    注2：关于HTML encoding

    因为该绑定是设置元素的innerText或textContent (而不是innerHTML)，所以它是安全的，没有HTML或者脚本注入的风险。例如：如果你编写如下代码：

     
 
 
      
  
  
  
    1. viewModel.myMessage("Hello, world!");
      2.

    … 它不会显示斜体字，而是原样输出标签。如果你需要显示HTML内容，请参考html绑定.

    注3：关于IE 6的白空格whitespace

    IE6有个奇怪的问题，如果 span里有空格的话，它将自动变成一个空的span。如果你想编写如下的代码的话，那Knockout将不起任何作用：

     
 
 
      
  
  
  
    1. Welcome,  to our web site.
      2.

    … IE6 将不会显示span中间的那个空格，你可以通过下面这样的代码避免这个问题：

     
 
 
      
  
  
  
    1. Welcome,   to our web site.
      2.

    IE6以后版本和其它浏览器都没有这个问题

    依赖性

    除KO核心类库外，无依赖。

    #p#

    3 html 绑定

    目的

    html绑定到DOM元素上，使得该元素显示的HTML值为你绑定的参数。如果在你的view model里声明HTML标记并且render的话，那非常有用。

    例子
     
  •     var viewModel = {
  •         details: ko.observable() // Initially blank
  •     };
  •     viewModel.details("For further details, view the report here.");
  •     // HTML content appears
  •   

    • 参数

    主参数

    KO设置该参数值到元素的innerHTML属性上，元素之前的内容将被覆盖。

    如果参数是监控属性observable的，那元素的内容将根据参数值的变化而更新，如果不是，那元素的内容将只设置一次并且以后不在更新。

    如果你传的是不是数字或者字符串(例如一个对象或者数组)，那显示的文本将是yourParameter.toString()的等价内容。

    其它参数

    无

    注：关于HTML encoding

    因为该绑定设置元素的innerHTML，你应该注意不要使用不安全的HTML代码，因为有可能引起脚本注入攻击。如果你不确信是否安全(比如显示用户输入的内容)，那你应该使用text绑定，因为这个绑定只是设置元素的text 值innerText和textContent。

    依赖性

    除KO核心类库外，无依赖。

    4 css 绑定

    目的

    css绑定是添加或删除一个或多个CSS class到DOM元素上。 非常有用，比如当数字变成负数时高亮显示。(注：如果你不想应用CSS class而是想引用style属性的话，请参考style绑定。)

    例子

     
 
 
      
  
  
  
      2. 
  
  
  
    2.    Profit Information 
      3. 
  
  
  
    3. 
  
  
  
    4.   
      5. 
  
  
  
    5. 
  
  
  
      7. 
  
  
  
    7.     var viewModel = { 
      8. 
  
  
  
    8.         currentProfit: ko.observable(150000) 
      9. 
  
  
  
    9.         // Positive value, so initially we don't apply the "profitWarning" class 
      10. 
  
  
  
    10.     }; 
      11. 
  
  
  
    11. 
  
  
  
    12.     viewModel.currentProfit(-50); 
      13. 
  
  
  
    13.     // Causes the "profitWarning" class to be applied 
      14. 
  
  
  
    14.

    效果就是当currentProfit 小于0的时候，添加profitWarning CSS class到元素上，如果大于0则删除这个CSS class。

    参数

    主参数

    该参数是一个JavaScript对象，属性是你的CSS class名称，值是比较用的true或false，用来决定是否应该使用这个CSS class。

    你可以一次设置多个CSS class。例如，如果你的view model有一个叫isServre的属性，

     
 
 
      
  
  
  
      2.

    非布尔值会被解析成布尔值。例如， 0和null被解析成false，21和非null对象被解析成true。

    如果参数是监控属性observable的，那随着值的变化将会自动添加或者删除该元素上的CSS class。如果不是，那CSS class将会只添加或者删除一次并且以后不在更新。

    你可以使用任何JavaScript表达式或函数作为参数。KO将用它的执行结果来决定是否应用或删除CSS class。

    其它参数

    无

    注：应用的CSS class的名字不是合法的JavaScript变量命名

    如果你想使用my-class class，你不能写成这样：

     
 
 
      
  
  
  
    1. ...
      2.

    … 因为my-class不是一个合法的命名。解决方案是：在my-class两边加引号作为一个字符串使用。这是一个合法的JavaScript 对象 文字(从JSON技术规格说明来说，你任何时候都应该这样使用，虽然不是必须的)。例如,

    依赖性

    除KO核心类库外，无依赖。

    5 style 绑定

    目的

    style绑定是添加或删除一个或多个DOM元素上的style值。比如当数字变成负数时高亮显示，或者根据数字显示对应宽度的Bar。(注：如果你不是应用style值而是应用CSS class的话，请参考CSS绑定。)

    例子

     
 
 
      
  
  
  
      2. 
  
  
  
    2.    Profit Information 
      3. 
  
  
  
    3. 
  
  
  
    4. 
  
  
  
    5. 
  
  
  
      7. 
  
  
  
    7.     var viewModel = { 
      8. 
  
  
  
    8.         currentProfit: ko.observable(150000) // Positive value, so initially black 
      9. 
  
  
  
    9.     }; 
      10. 
  
  
  
    10.     viewModel.currentProfit(-50); // Causes the DIV's contents to go red 
      11. 
  
  
  
    11.

    当currentProfit 小于0的时候div的style.color是红色，大于的话是黑色。

    参数

    主参数

    该参数是一个JavaScript对象，属性是你的style的名称，值是该style需要应用的值。

    你可以一次设置多个style值。例如，如果你的view model有一个叫isServre的属性，

     
 
 
      
  
  
  
    1. ...
      2.

    如果参数是监控属性observable的，那随着值的变化将会自动添加或者删除该元素上的style值。如果不是，那style值将会只应用一次并且以后不在更新。

    你可以使用任何JavaScript表达式或函数作为参数。KO将用它的执行结果来决定是否应用或删除style值。

    其它参数

    无

    注：应用的style的名字不是合法的JavaScript变量命名

    如果你需要应用font-weight或者text-decoration，你不能直接使用，而是要使用style对应的JavaScript名称。

    错误： { font-weight: someValue }; 正确： { fontWeight: someValue }

    错误： { text-decoration: someValue }; 正确： { textDecoration: someValue }

    参考：style名称和对应的JavaScript 名称列表。

    依赖性

    除KO核心类库外，无依赖。

    6 attr 绑定

    目的

    attr 绑定提供了一种方式可以设置DOM元素的任何属性值。你可以设置img的src属性，连接的href属性。使用绑定，当模型属性改变的时候，它会自动更新。

    例子

     
 
 
      
  
  
  
      2. 
  
  
  
    2.     Report 
      3. 
  
  
  
    3. 
  
  
  
    4. 
  
  
  
      6. 
  
  
  
    6.     var viewModel = { 
      7. 
  
  
  
    7.         url: ko.observable("year-end.html"), 
      8. 
  
  
  
    8.         details: ko.observable("Report including final year-end statistics") 
      9. 
  
  
  
    9.     }; 
      10. 
  
  
  
    10.

    呈现结果是该连接的href属性被设置为year-end.html， title属性被设置为Report including final year-end statistics。

    参数

    主参数

    该参数是一个JavaScript对象，属性是你的attribute名称，值是该attribute需要应用的值。

    如果参数是监控属性observable的，那随着值的变化将会自动添加或者删除该元素上的attribute值。如果不是，那attribute值将会只应用一次并且以后不在更新。

    其它参数

    无

    注：应用的属性名字不是合法的JavaScript变量命名

    如果你要用的属性名称是data-something的话，你不能这样写：

     
 
 
      
  
  
  
    1. ...
      2.

    … 因为data-something 不是一个合法的命名。解决方案是：在data-something两边加引号作为一个字符串使用。这是一个合法的JavaScript 对象 文字(从JSON技术规格说明来说，你任何时候都应该这样使用，虽然不是必须的)。例如,

     
 
 
      
  
  
  
    1. ...
      2.

    依赖性

    除KO核心类库外，无依赖。

    #p#

    7 click 绑定

    目的

    click绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数。大部分是用在button，input和连接a上，但是可以在任意元素上使用。

    例子

     
 
 
      
  
  
  
      2. 
  
  
  
    2.     You've clicked  times 
      3. 
  
  
  
    3.     Click me
      4. 
  
  
  
    4. 
  
  
  
    5. 
  
  
  
    6. 
  
  
  
      8. 
  
  
  
    8.     var viewModel = { 
      9. 
  
  
  
    9.         numberOfClicks: ko.observable(0), 
      10. 
  
  
  
    10.         incrementClickCounter: function () { 
      11. 
  
  
  
    11.             var previousCount =this.numberOfClicks(); 
      12. 
  
  
  
    12.             this.numberOfClicks(previousCount +1); 
      13. 
  
  
  
    13.         } 
      14. 
  
  
  
    14.     }; 
      15. 
  
  
  
    15.

    每次点击按钮的时候，都会调用incrementClickCounter()函数，然后更新自动更新点击次数。

    参数

    主参数

    Click点击事件时所执行的函数。

    你可以声明任何JavaScript函数 – 不一定非要是view model里的函数。你可以声明任意对象上的任何函数，例如： someObject.someFunction。

    View model上的函数在用的时候有一点点特殊，就是不需要引用对象的，直接引用函数本身就行了，比如直接写incrementClickCounter 就可以了，而无需写成： viewModel.incrementClickCounter(尽管是合法的)。

    其它参数

    无

    注1：传参数给你的click 句柄

    最简单的办法是传一个function包装的匿名函数：

     
 
 
      
  
  
  
      2. 
  
  
  
    2.     Click me 
      3. 
  
  
  
    3.

    这样，KO就会调用这个匿名函数，里面会执行viewModel.myFunction()，并且传进了'param1' 和'param2'参数。

    注2：访问事件源对象

    有些情况，你可能需要使用事件源对象，Knockout会将这个对象传递到你函数的第一个参数：

     
 
 
      
  
  
  
      2. 
  
  
  
    2.     Click me 
      3. 
  
  
  
    3. 
  
  
  
    4. 
  
  
  
    5. 
  
  
  
    6.  
      7. 
  
  
  
    7.      var viewModel = { 
      8. 
  
  
  
    8.          myFunction: function (event) { 
      9. 
  
  
  
    9.              if (event.shiftKey) { 
      10. 
  
  
  
    10.                  //do something different when user has shift key down 
      11. 
  
  
  
    11.              } else { 
      12. 
  
  
  
    12.                  //do normal action 
      13. 
  
  
  
    13.              } 
      14. 
  
  
  
    14.          } 
      15. 
  
  
  
    15.      }; 
      16. 
  
  
  
    16.

    如果你需要的话，可以使用匿名函数的第一个参数传进去，然后在里面调用：

     
 
 
      
  
  
  
      2. 
  
  
  
    2.     Click me 
      3. 
  
  
  
    3.

    这样，KO就会将事件源对象传递给你的函数并且使用了。

    注3: 允许执行默认事件

    默认情况下，Knockout会阻止冒泡，防止默认的事件继续执行。例如，如果你点击一个a连接，在执行完自定义事件时它不会连接到href地址。这特别有用是因为你的自定义事件主要就是操作你的view model，而不是连接到另外一个页面。

    当然，如果你想让默认的事件继续执行，你可以在你click的自定义函数里返回true。

    注4：控制this句柄

    初学者可以忽略这小节，因为大部分都用不着，高级用户可以参考如下内容：

    KO在调用你定义的函数时，会将view model传给this对象(也就是ko.applyBindings使用的view model)。主要是方便你在调用你在view model里定义的方法的时候可以很容易再调用view model里定义的其它属性。例如： this.someOtherViewModelProperty。

    如果你想引用其它对象，我们有两种方式：

    ◆ 你可以和注1里那样使用匿名函数，因为它支持任意JavaScript 对象。

    ◆ 你也可以直接引用任何函数对象。你可以使用bind使callback函数设置this为任何你选择的对象。例如：

     
 
 
      
  
  
  
      2. 
  
  
  
    2.     Click me 
      3. 
  
  
  
    3.

    如果你是C#或Java开发人员，你可以疑惑为什么我们还要用bind函数到一个对象想，特别是像调用someObject.someFunction。 原因是在JavaScript里，函数自己不是类的一部分，他们在单独存在的对象，有可能多个对象都引用同样的someFunction函数，所以当这个函数被调用的时候它不知道谁调用的(设置this给谁)。在你bind之前运行时是不会知道的。KO默认情况下设置this对象是view model，但你可以用bind语法重定义它。

    在注1里使用匿名函数的时候没有具体的要求，因为JavaScript代码 someObject.someFunction()就意味着调用someFunction，然后设置this到 someObject对象上。

    注5：防止事件冒泡

    默认情况下，Knockout允许click事件继续在更高一层的事件句柄上冒泡执行。例如，如果你的元素和父元素都绑定了click事件，那当你点击该元素的时候两个事件都会触发的。如果需要，你可以通过额外的绑定clickBubble来禁止冒泡。例如：

     
 
 
      
  
  
  
      2. 
  
  
  
    2.     
      3. 
  
  
  
    3.         Click me 
      4. 
  
  
  
    4.     
      5. 
  
  
  
    5.

    默认情况下，myButtonHandler会先执行，然后会冒泡执行myDivHandler。但一旦你设置了clickBubble为false的时候，冒泡事件会被禁止。

    依赖性

    除KO核心类库外，无依赖。

    #p#

    8 event 绑定

    目的

    event绑定在DOM元素上添加指定的事件句柄以便元素被触发的时候执行定义的JavaScript 函数。大部分情况下是用在keypress，mouseover和mouseout上。

    例子

     
 
 
      
  
  
  
      2. 
  
  
  
    2.     
      3. 
  
  
  
    3.         Mouse over me 
      4. 
  
  
  
    4.     
      5. 
  
  
  
    5.     
      6. 
  
  
  
    6.         Details 
      7. 
  
  
  
    7.     
      8. 
  
  
  
    8. 
  
  
  
    9. 
  
  
  
    10. 
  
  
  
      12. 
  
  
  
    12.     var viewModel = { 
      13. 
  
  
  
    13.         detailsEnabled: ko.observable(false), 
      14. 
  
  
  
    14.         enableDetails: function () { 
      15. 
  
  
  
    15.             this.detailsEnabled(true); 
      16. 
  
  
  
    16.         }, 
      17. 
  
  
  
    17.         disableDetails: function () { 
      18. 
  
  
  
    18.             this.detailsEnabled(false); 
      19. 
  
  
  
    19.         } 
      20. 
  
  
  
    20.     }; 
      21. 
  
  
  
    21.

    每次鼠标在第一个元素上移入移出的时候都会调用view model上的方法来toggle detailsEnabled的值，而第二个元素会根据detailsEnabled的值自动显示或者隐藏。

    参数

    主参数

    你需要传入的是一个JavaScript对象，他的属性名是事件名称，值是你所需要执行的函数。

    你可以声明任何JavaScript函数 – 不一定非要是view model里的函数。你可以声明任意对象上的任何函数，例如： event: { mouseover: someObject.someFunction }。

    View model上的函数在用的时候有一点点特殊，就是不需要引用对象的，直接引用函数本身就行了，比如直接写event: { mouseover: enableDetails } 就可以了，而无需写成： event: { mouseover: viewModel.enableDetails } (尽管是合法的)。

    其它参数

    无

    9 submit 绑定

    目的

    submit绑定在form表单上添加指定的事件句柄以便该form被提交的时候执行定义的JavaScript 函数。只能用在表单form元素上。

    当你使用submit绑定的时候， Knockout会阻止form表单默认的submit动作。换句话说，浏览器会执行你定义的绑定函数而不会提交这个form表单到服务器上。可以很好地解释这个，使用submit绑定就是为了处理view model的自定义函数的，而不是再使用普通的HTML form表单。如果你要继续执行默认的HTML form表单操作，你可以在你的submit句柄里返回true。

    例子

     
 
 
      
  
  
  
      2. 
  
  
  
    2.     ... form contents go here ... 
      3. 
  
  
  
    3.     Submit
      4. 
  
  
  
    4. 
  
  
  
    5. 
  
  
  
      7. 
  
  
  
    7.     var viewModel = { 
      8. 
  
  
  
    8.         doSomething: function (formElement) { 
      9. 
  
  
  
    9.             // ... now do something 
      10. 
  
  
  
    10.         } 
      11. 
  
  
  
    11.     }; 
      12. 
  
  
  
    12.

    这个例子里，KO将把整个form表单元素作为参数传递到你的submit绑定函数里。 你可以忽略不管，但是有些例子里是否有用，参考：ko.postJson工具。

    为什么不在submit按钮上使用click绑定?

    在form上，你可以使用click绑定代替submit绑定。不过submit可以handle其它的submit行为，比如在输入框里输入回车的时候可以提交表单。

    参数

    主参数

    你绑定到submit事件上的函数

    你可以声明任何JavaScript函数 – 不一定非要是view model里的函数。你可以声明任意对象上的任何函数，例如： submit: someObject.someFunction。

    View model上的函数在用的时候有一点点特殊，就是不需要引用对象的，直接引用函数本身就行了，比如直接写submit: doSomething就可以了，而无需写成： submit: viewModel. doSomething(尽管是合法的)。

    其它参数

    无

    备注：

    关于如果传递更多的参数给submit绑定函数，或者当调用非view model里的函数的时如何控制this，请参考click绑定。所有click绑定相关的notes也都适用于submit绑定。

    依赖性

    除KO核心类库外，无依赖。

    10 enable 绑定

    目的

    enable绑定使DOM元素只有在参数值为 true的时候才enabled。在form表单元素input，select，和textarea上非常有用。

    例子

     
 
 
      
  
  
  
      2. 
  
  
  
    2.     
      3. 
  
  
  
    3.     I have a cellphone 
      4. 
  
  
  
      5. 
  
  
  
    5. 
  
  
  
      7. 
  
  
  
    7.     Your cellphone number: 
      8. 
  
  
  
    8.     
      9. 
  
  
  
      10. 
  
  
  
    10.   
      11. 
  
  
  
      12. 
  
  
  
    12.     var viewModel = { 
      13. 
  
  
  
    13.         hasCellphone: ko.observable(false), 
      14. 
  
  
  
    14.         cellphoneNumber: "" 
      15. 
  
  
  
    15.     }; 
      16. 
  
  
  
    16.

    这个例子里，“Your cellphone number”后的text box 初始情况下是禁用的，只有当用户点击标签 “I have a cellphone”的时候才可用。

    参数

    主参数

    声明DOM元素是否可用enabled。

    非布尔值会被解析成布尔值。例如0和null被解析成false，21和非null对象被解析给true。

    如果你的参数是observable的，那绑定会随着observable值的改变而自动更新enabled/disabled状态。如果不是，则只会设置一次并且以后不再更新。

    其它参数

    无

    注：任意使用JavaScript表达式

    不紧紧限制于变量 – 你可以使用任何JavaScript表达式来控制元素是否可用。例如,

     
 
 
      
  
  
  
      2. 
  
  
  
    2.     Do something 
      3. 
  
  
  
    3.

    依赖性

    除KO核心类库外，无依赖。

    11 disable 绑定

    目的

    disable绑定使DOM元素只有在参数值为 true的时候才disabled。在form表单元素input，select，和textarea上非常有用。

    disable绑定和enable绑定正好相反，详情请参考enable绑定。

    #p#

    12 value 绑定

    目的

    value绑定是关联DOM元素的值到view model的属性上。主要是用在表单控件，