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在'markup：// 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>

我正在使用Kendo UI，所以根本不确定如何在闪电组件中使用它...这就是为什么我喜欢将这些模板设置到我的视觉力页面的照明组件中的原因，因为那样kendo元素将全部设置好并准备好进入组件。

提前感谢您提供任何帮助！

Answer 1

You should use Lightning Container to set your HTML template as a Lightning component, but just now this feature is available in Developer Edition orgs only, as it's a Developer Preview. You can add third party frameworks like AngularJS, React etc.

Answer 2

您可以将脚本登录名写入闪电组件控制器。

OR

您使用$ A.createComponent（）动态创建。

从可视化强制页面向闪电组件添加html

2 个答案: