Как получить доступ к пользовательскому элементу в компоненте нокаута?

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>" 
});