javascript - How to access custom element in a Knockout component? - Stack Overflow

admin管理员组

文章数量:1289911

Take a look at this scenario :

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

If I use <hello></hello> the generated html result will be:

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

But what if I want this:

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

Then how can I get a reference to the custom element tag in a ponent?

Take a look at this scenario :

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

If I use <hello></hello> the generated html result will be:

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

But what if I want this:

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

Then how can I get a reference to the custom element tag in a ponent?

• javascript
• knockout.js
• knockout-ponents

Share Improve this question Follow edited Aug 24, 2015 at 13:40 Jeroen 63.8k4646 gold badges228228 silver badges366366 bronze badges asked Sep 13, 2014 at 14:10 aminamin 3,86255 gold badges4040 silver badges6565 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 12

The custom element contains the ponent, it is not considered part of it. Just like the outer tag used in a foreach, template or with binding. If you want to style that tag, you have to add the bindings to style it. The ponent will fill its contents.

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

---

However if you absolutely wanted to access the parent element, I suppose it's possible but I would not remend it. The ponent should only be concerned with itself, not the container that contains it. This can (and will) cause problems if the element had any child nodes that also had bindings.

Use a factory function for your view model. It will have access to the ponent's info (which currently only includes the containing element element)

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

本文标签： javascriptHow to access custom element in a Knockout componentStack Overflow