1

ビジュアルフォースページで呼び出している雷コンポーネントにHTMLテンプレートを追加できるかどうかは疑問です。私は私のVfのページでこのテンプレートを持っている:ビジュアルフォースページから雷コンポーネントにhtmlを追加

$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は私のコンポーネントでタブバーを作成しますが、私はの身体を設定してみました。そして、コンポーネントを呼び出す

<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> 

aura:html要素をテンプレートに追加して、タブコンテンツの本体を新しいコンポーネントに設定しますが、「このページにはエラーがあります。 aura:html '[関数はありません]失敗した記述子:{マークアップ:// aura:html "エラー。

私のコンポーネントが現在のようになります。私は剣道UIを使用して、その雷コンポーネント内ということを利用する方法が全くわからない...なぜ私が希望しているのです

<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> 

ビジュアルフォースページからこれらのテンプレートをライティングコンポーネントに設定する方法が大好きです。剣道要素はすべてセットアップされ、すぐにコンポーネントにプッシュされるためです。

ありがとうございました!

答えて

0

HTMLテンプレートをLightningコンポーネントとして設定するには、Lightning Containerを使用する必要があります。ただし、この機能は開発者向けのプレビューとして、Developer Editionの組織のみで使用できます。 AngularJS、Reactなどのサードパーティのフレームワークを追加することができます

関連する問題