Sitelet https://github.com/knockoutcn/knockoutcn.github.io/issues/16
Skip to content

data-bind 语法 #16

Description

@wikieswan

绑定的语法

KO的声明绑定系统提供了简介又强大的方式来把数据绑定到UI上。通常可以很简明的绑定简单数据的属性,或者使用简单的绑定操作。要了解更多复杂的绑定,就需要理解KO绑定系统的表现和语法了。

绑定语法 

一个绑定由两部分组成,绑定的属性和对应的值,以一个冒号作为分割。下面是一个简单绑定的例子:

Today's message is: <span data-bind="text: myMessage"></span>

一个元素可以包含多个绑定,每一个绑定之间用逗号分割,例子:

<!-- related bindings: valueUpdate is a parameter for value -->
Your value: <input data-bind="value: someValue, valueUpdate: 'afterkeydown'" />

<!-- unrelated bindings -->
Cellphone: <input data-bind="value: cellphoneNumber, enable: hasCellphone" />

绑定属性通常是和注册的绑定属性相匹配或者是其他绑定的参数。如果属性不满足上面两张情况,KO会忽略它。所以说,如果某个绑定没有正常显示,首先需要检查属性名拼写是否正确。

绑定的值

绑定的值可以是一般的js变量或者对象,也可以是一个js表达式,看下面的例子:

<!-- variable (usually a property of the current view model -->
<div data-bind="visible: shouldShowMessage">...</div>

<!-- comparison and conditional -->
The item is <span data-bind="text: price() > 50 ? 'expensive' : 'cheap'"></span>.

<!-- function call and comparison -->
<button data-bind="enable: parseAreaCode(cellphoneNumber()) != '555'">...</button>

<!-- function expression -->
<div data-bind="click: function (data) { myFunction('param1', data) }">...</div>

<!-- object literal (with unquoted and quoted property names) -->
<div data-bind="with: {emotion: 'happy', 'facial-expression': 'smile'}">...</div>

上面这些例子展示了绑定的值可以是一个js表达式。在括号里面是可以有逗号的。当变量值是一个可遍历的对象的时候,那么对象属性值必须是合法的js标示符或者被引号括起来。如果绑定变量时一个非法的表达式或者指向一个未知的变量,KO会抛出错误并结束绑定过程。

空格

绑定中可以有很多空格(空格、tab、换行),你可以随便用,KO不会对空格做限制。下面的例子,空格不一样,但是表现是一样的。

<!-- no spaces -->
<select data-bind="options:availableCountries,optionsText:'countryName',value:selectedCountry,optionsCaption:'Choose...'"></select>

<!-- some spaces -->
<select data-bind="options : availableCountries, optionsText : 'countryName', value : selectedCountry, optionsCaption : 'Choose...'"></select>

<!-- spaces and newlines -->
<select data-bind="
    options: availableCountries,
    optionsText: 'countryName',
    value: selectedCountry,
    optionsCaption: 'Choose...'"></select>

绑定一个未知变量

从KO3.0开始,可以指定一个没有值的绑定,这样会给绑定一个 undefined值。例如:

<span data-bind="text">Text that will be cleared when bindings are applied.
</span>

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions