javascript - 如何访问 Knockout 组件中的自定义元素？

Question

看看这个场景：

ko.components.register('hello', {
     viewModel: function() { },
     template: "<h1>hello wrold</h1>"
});

如果我使用<hello></hello>生成的 html 结果将是：

<hello><h1>hello world</h1></hello>

但是如果我想要这个怎么办：

<hello class="hello"><h1>hello world</h1></hello>

那么如何获取对组件中自定义元素标签的引用呢？

Answer 1

自定义元素包含组件，它不被视为组件的一部分。就像在foreach,template或with绑定中使用的外部标签一样。如果要设置该标签的样式，则必须添加绑定以设置其样式。该组件将填充其内容。

<hello data-bind="css: 'hello'"></hello>

---

但是，如果您绝对想访问父元素，我想这是可能的，但我不推荐它。组件应该只关心它自己，而不是包含它的容器。如果元素有任何也有绑定的子节点，这可能（并且将会）导致问题。

为您的视图模型使用工厂函数。它将有权访问组件的信息（目前仅包括包含元素element）

ko.components.register('hello', {
    viewModel: {
        createViewModel: function (params, componentInfo) {
            var element = componentInfo.element;
            ko.applyBindingsToNode(element, { css: 'hello' });
            return {};
        }
    },
    template: "<h1>hello world</h1>"
});