1、knockout.js 简介

knockout.js是一个轻量级的UI类库，通过应用MVVM模式使JavaScript前端UI简单化，它对于分离前台的业务逻辑和视图简化数据绑定过程有显著的作用。它主要有4大概念：

  • Declarative Bindings (声明式绑定) 使用简明易读的语法很容易地将模型(model)数据关联到DOM元素上。
  • Automatic UI Refresh (UI界面自动刷新) 当您的模型状态(model state)改变时，您的UI界面将自动更新。
  • Dependency Tracking (依赖跟踪) 为转变和联合数据，在你的模型数据之间隐式建立关系。
  • Templating (模板) 为您的模型数据快速编写复杂的可嵌套的UI。

2、绑定语法

2.1 文本和样式绑定语法

1) visible绑定

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

2) text绑定

text绑定到DOM元素上，使得该元素显示的文本值为你绑定的参数。

3) html绑定

html绑定到DOM元素上，使得该元素显示的HTML值为你绑定的参数。

4) css绑定

css绑定是添加或删除一个或多个CSS class到DOM元素上。

<div data-bind="css: { profitWarning: currentProfit() < 0 }">Profit Information</div>
<div data-bind="css: { 'my-class': someValue }">...</div>

注意，如果css中的class名称携带-字符，则必须在名称两侧加上单引号。

5) style绑定

style绑定是添加或删除一个或多个DOM元素上的style值。

<div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black',
                         fontWeight: isSevere() ? 'bold' : '' }">...</div>

注意，data-bind中的style属性需要使用驼峰命名格式。

6) attr绑定

attr绑定提供了一种方式可以设置DOM元素的任何属性值。

<div data-bind="attr: { 'data-something': someValue }">...</div>

注意，如果attr属性名称中携带-字符，则必须在名称两侧加上单引号。

2.2 表单绑定

  • clicke
  • event
  • submit
  • enable
  • disable
  • value
  • textInput
  • hasFoucs
  • checked
  • options
  • selectedOptions
  • uniqueName

2.3 控制流语法

  • foreach
  • if
  • ifnot
  • with
  • component

参考资料