你的位置:首页 > Java教程

[Java教程]KnockoutJS 3.X API 第四章 绑定语法细节


data-bind绑定语法

Knockout的声明性绑定系统提供了一种简洁而强大的方法来将数据链接到UI。 绑定到简单的数据属性或使用单个绑定通常是容易和明显的。 对于更复杂的绑定,它有助于更好地了解Knockout的绑定系统的行为和语法。

绑定语法

绑定包含两个项目,绑定名称和值,用冒号分隔。 这里是一个单一的简单绑定的示例:

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" />

绑定名称通常应与注册的绑定处理程序(内置或自定义)匹配,或者是另一绑定的参数。 如果名称不匹配,Knockout将忽略它(没有任何错误或警告)。 因此,如果绑定看起来不工作,首先检查名称是否正确。

绑定值

绑定值可以是单个值,变量或字面值或几乎任何有效的JavaScript表达式。 下面是各种绑定值的示例:

<!-- 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>

这些示例显示该值可以只是关于任何JavaScript表达式。 即使逗号和括号括在大括号,括号或括号中。 当值是对象字面值时,对象的属性名称必须是有效的JavaScript标识符或用引号括起来。 如果绑定值是无效表达式或引用未知变量,Knockout将输出错误并停止处理绑定。

带空格的绑定写法

绑定可以包含任意数量的空格(空格,制表符和换行符),因此您可以随意使用它来根据需要排列绑定。 以下示例均等效:

<!-- 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>

无值绑定

从Knockout 3.0开始,您可以指定没有值的绑定,这将给绑定一个未定义的值。 例如:

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

当与绑定预处理配合使用时,此功能特别有用,可以为绑定分配默认值。

 

绑定上下文

绑定上下文是保存您可以从绑定引用的数据的对象。 在应用绑定时,Knockout自动创建和管理绑定上下文的层次结构。 层次结构的根级别是指您提供给ko.applyBindings(viewModel)的viewModel参数。 然后,每次使用控制流绑定(如with或foreach)时,都会创建引用嵌套视图模型数据的子绑定上下文。

绑定上下文提供以下特殊属性,您可以在任何绑定中引用:

  • $parent

    这是父上下文中的视图模型对象,即紧接在当前上下文之外的视图模型对象。 在根上下文中,这是未定义的。 例:

    <h1 data-bind="text: name"></h1><div data-bind="with: manager"><!-- Now we're inside a nested binding context --><span data-bind="text: name"></span> is themanager of <span data-bind="text: $parent.name"></span></div>

  • $parents

    这是一个表示所有父视图模型的数组:

    $ parents [0]是来自父上下文的视图模型(即,它与$ parent相同)

    $ parents [1]是祖父上下文的视图模型

    $ parents [2]是祖父的祖父母上下文的视图模型

    … and so on.

  • $root

    这是根上下文中的主视图模型对象,即最顶层父上下文。 它通常是传递给ko.applyBindings的对象。 它等价于$ parents [$ parents.length - 1]。

  • $component(未来章节详细介绍)

    如果你在特定组件模板的上下文中,那么$ component引用该组件的viewmodel。 它是特定于组件的等价于$ root。 在嵌套组件的情况下,$ component指的是最近组件的viewmodel。

    这是有用的,例如,如果组件的模板包含一个或多个foreach块,其中您希望引用组件视图模型上的某些属性或函数,而不是当前数据项。

  • $data

    这是当前上下文中的视图模型对象。 在根上下文中,$ data和$ root是等效的。 在嵌套绑定上下文中,此参数将设置为当前数据项(例如,在with:person绑定内,$ data将设置为person)。 $ data在你想引用viewmodel本身时很有用,而不是viewmodel上的一个属性。 例:

    <ul data-bind="foreach: ['cats', 'dogs', 'fish']"><li>The value is <span data-bind="text: $data"></span></li></ul>

  • $index (仅在foreach绑定中可用)

    这是由foreach绑定呈现的当前数组条目的从零开始的索引。 与其他绑定上下文属性不同,$ index是一个observable,并且只要项目的索引发生更改(例如,如果项目添加到数组或从数组中删除),就会更新。

  • $parentContext

    这指的是父级别的绑定上下文对象。 这与$ parent不同,$ parent指的是父级别的数据(非绑定上下文)。 例如,如果您需要从内部上下文(用法:$ parentContext。$ index)访问外部foreach项的索引值,这是有用的。 在根上下文中未定义。

  • $rawData

    这是当前上下文中的原始视图模型值。 通常这将与$ data相同,但是如果提供给Knockout的视图模型包装在一个observable中,那么$ data将是展开的视图模型,$ rawData将是observable本身。

  • $componentTemplateNodes

    如果你在特定组件模板的上下文中,那么$ componentTemplateNodes是一个包含传递给该组件的任何DOM节点的数组。 这使得容易构建接收模板的组件,例如接受模板以定义其输出行的网格组件。 有关完整的示例,未来章节讲详细介绍。

以下特殊变量也可在绑定中使用,但不是绑定上下文对象的一部分:

  • $context

    这指的是当前绑定上下文对象。 如果要访问上下文的属性(如果它们也可能存在于视图模型中),或者如果要将上下文对象传递到视图模型中的辅助函数,则这可能很有用。

  • $element

    这是元素DOM对象(对于虚拟元素,它将是注释DOM对象)当前绑定。 如果绑定需要访问当前元素的属性,这可能很有用。 例:

    <div id="item1" data-bind="text: $element.id"></div>

控制或修改自定义绑定中的绑定上下文

就像使用foreach的内置绑定一样,自定义绑定可以更改其后代元素的绑定上下文,或通过扩展绑定上下文对象来提供特殊属性。 这将在创建控制后代绑定的自定义绑定章节中进行详细描述。

章节结语

在以后章节中,将会介绍到KnockoutJS3.X的高级应用,尽请期待,感谢阅读。支持的话请点一波关注和推荐。谢谢