KnockoutJS 3.X API 第五章高级应用使用预处理扩展Knockout绑定语法

Posted 2020-08-14 SmallProgram

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了KnockoutJS 3.X API 第五章高级应用使用预处理扩展Knockout绑定语法相关的知识，希望对你有一定的参考价值。

注意：这是一种高级技术，通常仅在创建可重用绑定或扩展语法的库时使用。这不是你通常需要做的时候使用Knockout构建应用程序。

从Knockout 3.0开始，开发人员可以通过提供在绑定过程中重写DOM节点和绑定字符串的回调来定义自定义语法。

预处理绑定字符串

您可以通过为特定绑定处理程序（例如click，visible或任何自定义绑定处理程序）提供绑定预处理程序，来挂钩Knockout的逻辑来解释数据绑定属性。

为此，将预处理函数附加到绑定处理程序：

ko.bindingHandlers.yourBindingHandler.preprocess = function(stringFromMarkup) {
    // Return stringFromMarkup if you don‘t want to change anything, or return
    // some other string if you want Knockout to behave as if that was the
    // syntax provided in the original html
}

具体参数请参见本页后面的API参考。

示例1：设置绑定的默认值

如果你抛弃一个绑定的值，它的默认绑定到未定义。如果要为绑定具有不同的默认值，可以使用预处理器。例如，您可以允许通过将uniqueName的默认值设置为true来绑定不带值的值：

ko.bindingHandlers.uniqueName.preprocess = function(val) {
    return val || ‘true‘;
}

现在你可以这样绑定：

<input data-bind="value: someModelProperty, uniqueName" />

示例2：将表达式绑定到事件

如果您希望能够将表达式绑定到单击事件（而不是Knockout期望的函数引用），则可以为单击处理程序设置预处理器以支持此语法：

ko.bindingHandlers.click.preprocess = function(val) {
    return ‘function($data,$event){ ‘ + val + ‘ }‘;
}

现在你可以这样绑定click：

<button type="button" data-bind="click: myCount(myCount()+1)">Increment</button>

绑定预处理器引用

ko.bindingHandlers.<name>.preprocess(value, name, addBindingCallback)

如果定义，在评估绑定之前，将为每个<name>绑定调用此函数。

参数:

value: Knockout尝试解析绑定值之前的语法（例如，对于Binding：1 + 1，关联值为“1 + 1”作为字符串）。
name: 绑定的名称（例如，对于您的Binding：1 + 1，名称是“yourBinding”作为字符串）。
addBinding: 一个回调函数，您可以选择使用在当前元素上插入另一个绑定。这需要两个参数，名称和值。例如，在你的预处理函数中，调用addBinding（‘visible‘，‘acceptsTerms（）‘）; 使Knockout表现得好像该元素上有一个visible：acceptsTerms（）绑定。

返回值:

您的预处理函数必须返回要解析并传递到绑定的新字符串值，或返回undefined以删除绑定。
例如，如果你返回‘value +“.toUpperCase（）”‘作为字符串，那么你的Binding：“Bert”会被解释为标记包含你的Binding：“Bert”.toUpperCase（）。 Knockout将以正常方式解析返回的值，因此它必须是一个合法的javascript表达式。
不返回非字符串值。这没有意义，因为标记总是一个字符串。

预处理DOM节点

你可以通过提供一个节点预处理器来钩入Knockout的逻辑来遍历DOM。这是一个函数，Knockout将为它遍历的每个DOM节点调用一次，无论是在UI首次绑定时，还是在注入任何新的DOM子树（例如，通过foreach绑定）时。

为此，请在绑定提供程序上定义preprocessNode函数：

ko.bindingProvider.instance.preprocessNode = function(node) {
    // Use DOM APIs such as setAttribute to modify ‘node‘ if you wish.
    // If you want to leave ‘node‘ in the DOM, return null or have no ‘return‘ statement.
    // If you want to replace ‘node‘ with some other set of nodes,
    //    - Use DOM APIs such as insertChild to inject the new nodes
    //      immediately before ‘node‘
    //    - Use DOM APIs such as removeChild to remove ‘node‘ if required
    //    - Return an array of any new nodes that you‘ve just inserted
    //      so that Knockout can apply any bindings to them
}

示例3：虚拟模板元素

如果你通常使用虚拟元素包含模板内容，正常的语法可以感觉有点冗长。使用预处理，您可以添加使用单个注释的新模板格式：

ko.bindingProvider.instance.preprocessNode = function(node) {
    // Only react if this is a comment node of the form <!-- template: ... -->
    if (node.nodeType == 8) {
        var match = node.nodeValue.match(/^\s*(template\s*:[\s\S]+)/);
        if (match) {
            // Create a pair of comments to replace the single comment
            var c1 = document.createComment("ko " + match[1]),
                c2 = document.createComment("/ko");
            node.parentNode.insertBefore(c1, node);
            node.parentNode.replaceChild(c2, node);
 
            // Tell Knockout about the new nodes so that it can apply bindings to them
            return [c1, c2];
        }
    }
}