淘汰赛中的自定义绑定处理程序

Question

我的 html 中有 div，如下所示..

<div data-helper="my helper text1">help</div>

我的 javascript 中有一个数组

self.helpers = [
       { name: ' abc ', helper: ' my helper text1 ' },
       { name: ' def ', helper: ' my helper text2 ' },
       { name: ' xyz ', helper: ' my helper text3 ' }
           ];

使用 knockoutjs，我想将 helper 绑定到 data-helper 文本。

基本上我需要一些东西可以将下面的代码转换为必要的 html 代码..

<div databind="helper:helpers.helper">help</div>

我尝试创建自定义绑定处理程序但不能..

真诚感谢任何帮助。

谢谢

更新：我在未查看代码的情况下接受了答案，因此必须重新提出问题。 我需要线条如下所示..

<div data-helper="my helper text1">help</div>

所以，div data-bind:text 可能不起作用

我尝试如下但没有成功..

<!-- ko foreach: helpers -->
            <div data-bind="attr: {data-helper:helper}">help
            </div>
            <!-- /ko -->

Answer 1

有两种方法可以实现此功能：custom component 和 custom binding。您可以从下面的简短示例开始：

ko.components.register('my-component', {
        viewModel: {
            createViewModel: function(params, componentInfo) {
              return {
                helpers: params.helpers
              };
            }
        },
        template: { element: 'my-component-template' }
    });

ko.bindingHandlers.helper = {
        init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
          var values = valueAccessor(),
              $templateHtml = $('#my-component-template').text(),
              $element = $(element).append($templateHtml);
            var childContext = bindingContext.createChildContext(values);
            ko.applyBindings(childContext, $element.children()[0]);
            return { controlsDescendantBindings: true };
        }
    };

ko.applyBindings([
       { name: ' abc ', helper: 'my helper text1' },
       { name: ' def ', helper: 'my helper text2' },
       { name: ' xyz ', helper: 'my helper text3' }
           ]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<script type="text/html" id="my-component-template">
    <div>
        <!-- ko foreach: helpers -->
            <div data-bind="text: helper, attr: { 'data-helper': helper }">
            </div>
        <!-- /ko -->
    </div>
</script>

<div>Component:</div>
<my-component params="helpers: $data"></my-component>

<div>Custom binding:</div>
<div data-bind="helper: { helpers: $data }"></div>

自定义组件由注册码（"ko.components.register('my-component'..."）和模板（"..."）组成。

更新 1。

我添加了自定义绑定示例。您可以查看documentation了解更多详情。

更新 2

你应该用引号包裹 attr 名称：

<div data-bind="text: helper, attr: { 'data-helper': helper }">
</div>