Knockout.js自定义template绑定：兼容with绑定的极简语法实现问询

作为Knockout.js重度用户，我偏好其轻量无冗余的特性，是极致语法极简主义者，认为过多符号会增加代码阅读疲劳。默认同时渲染模板并设置子上下文的语法为：

<div data-bind="template: { name: 'TemplateName', data: child }"></div>

我希望启用更简洁的写法：

<div data-bind="template: 'TemplateName', with: child"></div>

但默认情况下这种写法会触发「You cannot apply bindings multiple times to the same element」异常。我通过改写template和with绑定实现了该功能，具体代码如下：

let original_template_binding   = ko.bindingHandlers.template;
let original_with_binding       = ko.bindingHandlers.with;

ko.bindingHandlers.template = 
{
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) 
    {
        var with_value = allBindings.get('with');

        if ( with_value !== undefined )
            bindingContext = bindingContext.createChildContext(() => with_value);

        return original_template_binding.init(element, valueAccessor, allBindings, viewModel, bindingContext);
    },
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) 
    {
        var with_value = allBindings.get('with');

        if ( with_value !== undefined )
            bindingContext = bindingContext.createChildContext(() => with_value);

        return original_template_binding.update(element, valueAccessor, allBindings, viewModel, bindingContext);
   }
};

ko.bindingHandlers['with'] = 
{
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) 
    {
        if ( allBindings.has('template') )
            return undefined;

        return original_with_binding.init(element, valueAccessor, allBindings, viewModel, bindingContext);
    }
}

核心逻辑为：当template绑定检测到with值时，将其作为子上下文传入；当with绑定检测到template绑定则禁用自身。现提出两个问题：

1. 是否有更简单、风险更低的方式实现类似功能？
2. 该实现是否存在显著性能隐患？allBindings访问器的开销是否低廉？

问题1：更简单低风险的实现方式 #

有两种更稳妥的方案，避免同时修改两个核心绑定带来的兼容性风险：

方案1：扩展模板绑定，自动合并with参数

只修改template绑定的逻辑，当传入的模板值是字符串时，自动检查是否存在with绑定并合并为模板的data参数，无需修改with绑定：

const originalTemplate = ko.bindingHandlers.template;
ko.bindingHandlers.template = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        const newValueAccessor = () => {
            let templateConfig = ko.unwrap(valueAccessor());
            // 如果模板值是字符串，尝试读取with绑定作为data
            if (typeof templateConfig === 'string') {
                const withData = allBindings.get('with');
                if (withData !== undefined) {
                    templateConfig = { name: templateConfig, data: withData };
                }
            }
            return templateConfig;
        };
        return originalTemplate.init(element, newValueAccessor, allBindings, viewModel, bindingContext);
    },
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        const newValueAccessor = () => {
            let templateConfig = ko.unwrap(valueAccessor());
            if (typeof templateConfig === 'string') {
                const withData = allBindings.get('with');
                if (withData !== undefined) {
                    templateConfig = { name: templateConfig, data: withData };
                }
            }
            return templateConfig;
        };
        originalTemplate.update(element, newValueAccessor, allBindings, viewModel, bindingContext);
    }
};

这种方式完全复用原生模板绑定的逻辑，只是在参数层面做转换，不会破坏with绑定的原有功能，也不会和其他扩展冲突。

方案2：自定义新绑定templateWith

直接创建一个全新的绑定，完全独立于原生绑定，风险最低：

ko.bindingHandlers.templateWith = {
    init: function(element, valueAccessor, allBindings) {
        const templateName = ko.unwrap(valueAccessor());
        const data = ko.unwrap(allBindings.get('with'));
        // 直接调用原生template绑定的init方法
        return ko.bindingHandlers.template.init(element, () => ({ name: templateName, data }), allBindings);
    },
    update: function(element, valueAccessor, allBindings) {
        const templateName = ko.unwrap(valueAccessor());
        const data = ko.unwrap(allBindings.get('with'));
        ko.bindingHandlers.template.update(element, () => ({ name: templateName, data }), allBindings);
    }
};

用法变为：

<div data-bind="templateWith: 'TemplateName', with: child"></div>

这种方式完全不修改原生绑定，不会影响任何现有代码，适合对稳定性要求高的场景。

问题2：性能隐患与allBindings开销 #

• allBindings访问开销极低：allBindings.get()和allBindings.has()都是Knockout内部维护的绑定集合的直接访问操作，本质是简单的属性查找或存在性检查，不会产生显著的性能消耗，在常规业务场景下完全可以忽略。
• 现有实现的风险不在性能，而在逻辑兼容性：
  1. 强制关联template和with绑定，可能覆盖用户的特殊场景（比如用户同时使用这两个绑定但并非要关联子上下文），导致意外行为。
  2. 修改了原生with绑定的init方法，如果有其他第三方扩展也修改了该绑定，会出现逻辑覆盖冲突。
  3. 在init和update中都创建子上下文，虽然Knockout的createChildContext本身性能没问题，但重复创建是否必要？其实原生模板绑定的data参数已经会自动处理上下文切换，方案1的参数转换方式更贴合原生逻辑，避免重复操作。

内容的提问来源于stack exchange，提问作者Dirk Boer