1

我想知道是否可以将 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 元素的主体设置为我的模板，然后将选项卡内容的主体设置为该新组件，但我得到“此页面有一个错误。您可能只需要刷新它。重新渲染在 'markup://aura:html' [wou is not a function] 失败描述符中抛出错误：{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，所以完全不确定如何在闪电组件中使用它......这就是为什么我喜欢一种方法来从我的视觉力量页面将这些模板设置到照明组件中，因为那时剑道元素将全部设置好并准备就绪，然后直接放入组件中。

提前感谢您对此的任何帮助！

4

2 回答 2

0

您应该使用Lightning Container将您的 HTML 模板设置为 Lightning 组件，但目前此功能仅在 Developer Edition 组织中可用，因为它是 Developer Preview。您可以添加第三方框架，如 AngularJS、React 等。

于 2017-04-10T00:08:37.617 回答
0

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

或者

您使用 $A.createComponent() 动态创建。

于 2018-09-20T07:01:05.130 回答