将自定义绑定的值传递给自定义绑定中添加的 DOM 元素答案

【问题标题】：Pass custom binding's value to DOM element added in custom binding将自定义绑定的值传递给自定义绑定中添加的 DOM 元素
【发布时间】：2015-11-13 22:04:32
【问题描述】：

我正在尝试使用 knockoutjs 自定义绑定来创建组件。这可能不是一个好主意，如果有其他方法可以做同样的事情，我愿意接受替代方案。

想法是为元素设置自定义绑定，以便根据传递给绑定的数据填充元素内容。

例如（在翡翠模板中），我会写：

div(data-bind="keyValueEditor: $data.somePropertyHoldingSomeData")

我有以下（为问题简化）自定义绑定：

ko.bindingHandlers.keyValueEditor = {
    init: function ( element, valueAccessor ) {
        var value = valueAccessor();

        var valueUnwrapped = ko.unwrap( value );

        $( "<span data-bind='text: theDataThatWasPassedToTheBinding.value'/>" ).appendTo( element );
        }
    },
    update: function ( element, valueAccessor ) {
    }
};

这里value 是一个可观察的，我想使用text 绑定绑定到跨度内容。我的问题是我不知道在 theDataThatWasPassedToTheBinding 中输入什么，所以它等于作为绑定值传递的 $data.somePropertyHoldingSomeData。

我试过了：

$( "<span data-bind='text: " + valueAccessor().value + "'/>" ).appendTo( element );

和

$( "<span data-bind='text: " + ko.unwrap( valueAccessor() ).value + "'/>" ).appendTo( element );

这可能吗？

【问题讨论】：

不确定谁是-1，这是一个写得很好的问题。（想详细说明，否决者？）
Manuel 如果你有机会创造一个小提琴它可能更容易帮助你解决这个问题。

标签： knockout.js ko-custom-binding

【解决方案1】：

你可以使用函数
ko.applyBindingsToNode(node, bindings, viewModel, bindingAttributeName)

ko.bindingHandlers.keyValueEditor = {
    init: function ( element, valueAccessor ) 
    {
        var somePropertyHoldingSomeData = valueAccessor();
        var span = $( "<span>" );
        span.appendTo(element);
        ko.applyBindingsToNode(span[0], {text: somePropertyHoldingSomeData.value})
    }
}

JSFiddle DEMO

【讨论】：