Получение содержимого пользовательского компонента knockout.js
Я пытаюсь создать пользовательский компонент в knockout.js.
HTML
<demo-widget>TEXT NEEDED</demo-widget>
Javascript
ko.components.register('demo-widget', {
template: '<div>New Text</div>'
});
ko.applyBindings();
Компонент загружается нормально и все, но теперь я хочу получить любой контент, который был внутри оригинального тега пользовательского компонента (например, текст "TEXT NEEDED").
Есть идеи, как я могу это сделать? Надеюсь, я объяснил это достаточно ясно.
Вот скрипка: http://jsfiddle.net/WhesleyBarnard/f7bmynp5/5/
2 ответа
Почему бы не использовать атрибут params для сохранения исходного текста:
HTML:
<demo-widget params="initialValue: 'text i need to get...'"></demo-widget>
ЯШ:
ko.components.register('demo-widget', {
template: "<div data-bind=\"text: 'content in my component. previous was: '
+ initialValue \">
</div>"
});
ko.applyBindings();
Теперь это возможно (начиная с Knockout 3.3), смотрите документацию KnockoutJS здесь: Передача разметки в компоненты.
Я не буду копировать весь текст здесь, но суть:
По умолчанию узлы DOM внутри [вашего компонента] будут удалены (без привязки к какой-либо модели представления) и заменены выходными данными компонента. Однако эти DOM-узлы не теряются: они запоминаются и передаются компоненту двумя способами:
- Как массив,
$componentTemplateNodes
Доступно для любого выражения привязки в шаблоне компонента (т. е. как свойство контекста привязки). Обычно это наиболее удобный способ использования поставляемой разметки. Смотрите пример ниже.- Как массив,
componentInfo.templateNodes
перешел к своемуcreateViewModel
функцияЗатем компонент может выбрать использование предоставленных узлов DOM в качестве части своего вывода, как он пожелает, например, используя
template: { nodes: $componentTemplateNodes }
на любом элементе в шаблоне компонента.
Связанный вопрос SO: Knockout 3.2: могут ли компоненты / пользовательские элементы содержать дочерний контент?