Wie kann man auf ein benutzerdefiniertes Element in einer Knockout-Komponente zugreifen?

Question

einen Blick auf dieses Szenario Nehmen:

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

Wenn ich <hello></hello> die erzeugte HTML-Ergebnis verwenden werden:

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

Aber was, wenn ich diese wollen:

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

Dann, wie kann ich einen Verweis auf das benutzerdefinierte Element-Tag in einer Komponente erhalten?

Answer 1

Das benutzerdefinierte Element enthält die Komponente, es gilt nicht als Teil davon. Genau wie der äußere Tag, der in einer foreach, template oder with Bindung verwendet wurde. Wenn Sie dieses Tag stylen möchten, müssen Sie die Bindungen hinzufügen, um es zu stylen. Die Komponente füllt ihren Inhalt.

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

---

Wenn Sie jedoch unbedingt das übergeordnete Element zugreifen wollen, ich nehme an, es ist möglich, aber ich würde es nicht empfehlen. Die Komponente sollte nur sich selbst betreffen, nicht den Container, der sie enthält. Dies kann (und wird) zu Problemen führen, wenn das Element untergeordnete Knoten hat, die ebenfalls Bindungen haben.

Verwenden Sie eine Factory-Funktion für Ihr Ansichtsmodell. Es wird Zugriff auf die Informationen der Komponente haben (die derzeit nur das enthaltende Element enthält 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>" 
});