Добавить html к компоненту молнии с экрана визуальной силы

Question

Мне интересно, можно ли добавить шаблон HTML к компоненту молнии, который я вызываю на странице визуальной силы. У меня есть этот шаблон в моей странице Vf:

<script id="user_filter_template" type="text/x-kendo-template"> 
      <input type="text" id="comboBox" name="comboBox"/> 
      <div class="container" id="checkboxWrapper" style="margin-top: 10px;"> 
       <p style="display: inline; margin-top: 10px;">Enable: </p> 
       <input type="checkbox" id="ownerFilterCheckbox" style="margin-top: 2px;"/>  
      </div> 
     </script> 

Затем вызова компонента:

$Lightning.use("c:filterBar", function(){ 
        $Lightning.createComponent("c:userTab", {label: ""}, "filterTabStrip", function(comp, status, errorMessage){ 
         userTemplate = $('#user_filter_template').html(); 
         $A.createComponent("aura:html", {tag: "div", body: userTemplate}, function(cmp, success, errorMessage){ 
          console.log(cmp); 
          var ownerTab = comp.find('ownerTabContent'); 
          ownerTab.set('v.body', userTemplate); 
         }); 
        });  
       }); 

Первый $ Lightning.createComponent создает панель вкладок, что это мой компонент, но я попытался установить тело элемент aura: html для моего шаблона, а затем установите тело моего содержимого вкладки на этот новый компонент, но я получаю «Эта страница имеет ошибку. Возможно, вам просто нужно ее обновить. rerender выбрал ошибку в« разметке: // aura: html '[wou не является функцией] Ошибка описания дескриптора: {markup: // aura: html ".

Мой компонент в настоящее время выглядит следующим образом:

<aura:component > 
<aura:attribute name="opts" type="List" default="['Tyler Dahle','Molly Demouser','Penny Demouser', 'Ted Demouser']"/> 

<div class="slds-tabs--scoped"> 
    <ul aura:id="tabBar" class="slds-tabs--scoped__nav" role="tablist"> 
     <li aura:id="ownerTab_item" class="slds-tabs--scoped__item" title="ownerTab" role="presentation" onclick="{!c.ownerTabSelect}"><a class="slds-tabs--scoped__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="true" aria-controls="ownerTabContent" id="ownerTab"><lightning:icon iconName="utility:groups"/></a></li> 
     <li aura:id="locationTab_item" class="slds-tabs--scoped__item" title="locationTab" role="presentation" onclick="{!c.locationTabSelect}"><a class="slds-tabs--scoped__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="true" aria-controls="locationTabContent" id="locationTab"><lightning:icon iconName="utility:location"/></a></li> 
     <li aura:id="descriptionTab_item" class="slds-tabs--scoped__item" title="descriptionTab" role="presentation" onclick="{!c.descriptionTabSelect}"><a class="slds-tabs--scoped__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="true" aria-controls="descriptionTabContent" id="descriptionTab"><lightning:icon iconName="utility:description"/></a></li> 
     <li aura:id="typeTab_item" class="slds-tabs--scoped__item" title="typeTab" role="presentation" onclick="{!c.typeTabSelect}"><a class="slds-tabs--scoped__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="true" aria-controls="typeTabContent" id="typeTab"><lightning:icon iconName="utility:picklist"/></a></li> 
     <li aura:id="customTab_item" class="slds-tabs--scoped__item" title="customTab" role="presentation" onclick="{!c.customTabSelect}"><a class="slds-tabs--scoped__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="true" aria-controls="customTabContent" id="customTab"><lightning:icon iconName="utility:apps"/></a></li> 
     <li aura:id="settingsTab_item" class="slds-tabs--scoped__item" title="settingsTab" role="presentation" onclick="{!c.settingsTabSelect}"><a class="slds-tabs--scoped__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="true" aria-controls="settingsTabContent" id="settingsTab"><lightning:icon iconName="utility:settings"/></a></li> 
    </ul> 
    <div aura:id="ownerTabContent" class="slds-tabs--scoped__content slds-hide" role="tabpanel" aria-labelledby="ownerTab"> 
     {!v.body} 
    </div> 

Я использую Кендо UI, поэтому не уверен вообще, как использовать это в качестве компонента молнии ... поэтому я бы любите способ просто установить эти шаблоны в компонент освещения на моей странице визуальной силы, потому что тогда элементы kendo будут настроены и готовы к работе и просто плюнутся в компонент.

Заранее благодарим за помощь!

Answer 1

Вы должны использовать Lightning Container, чтобы настроить свой HTML-шаблон как компонент Lightning, но сейчас эта функция доступна только в организациях Developer Edition, так как это предварительный просмотр для разработчиков. Вы можете добавить сторонние фреймворки, такие как AngularJS, React и т. Д.