KnockoutJS 3.X API 第四章(14) 绑定语法细节

时间：2020-12-22 07:18:59

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 the

manager 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的高级应用，尽请期待，感谢阅读。支持的话请点一波关注和推荐。谢谢

相关文章