模板标签不包含内容

本文关键字：包含内 标签 | 更新日期: 2023-09-27 17:50:42

我在模板中包装了一些html，但是当我尝试激活模板并更改模板中的一些元素时，它返回为空。我在模板上做了一个console.log，所有回来的都是模板标签的开始和结束标签，例如<template id="panel-template"></template>，这是渲染的版本，正如你所看到的，没有一个应该被封装在里面的html不存在。

这是我的模板

<template id="panel-template">
<div class="panel panel-default" draggable="true">
    <div class="panel-heading">
        <h3 class="panel-title">
            Panel title
            <span class="glyphicon glyphicon-pencil panel-icons"></span>
            <span class="glyphicon glyphicon-zoom-in panel-icons"></span>
            <span class="glyphicon glyphicon-trash panel-icons"></span>
        </h3>
    </div>
    <div class="panel-body">
    </div>
</div>

，这是与模板相关的javascript的一部分，我当然把它包装在document中。准备好了

if ('content' in document.createElement('template')) {
                    //var widgetCount = document.getElementById('columns').getAttribute('data-count');
                    var widgetModel = @Html.Raw(Json.Encode(Model.widgets));
                    for (var i = 0; i < widgetModel.length; i++) {
                        var clone = loadwidgets(widgetModel[i]); //This function is in an external js file
                        var inputDestination = document.querySelector('#col2')
                        console.log(inputDestination);
                        inputDestination.appendChild(clone);
                    }
                }

下面是loadWidgets函数

function loadwidgets (jsonObject) {
var template = document.querySelector('#panel-template');
var panelTitle = template.querySelector('div.panel-title');
var widgetType = template.querySelector('div.panel-body');
console.log(template);
//We give the widget a name on top of panel, this will be user defined.
panelTitle.textContent = jsonObject.WidgetName;
widgetType.setAttribute('id', jsonObject.WidgetCode);
return document.importNode(template, true);

}

我得到一个错误说panelTitle是空的，但我认为这是因为激活模板时，它似乎没有通过封装的html元素拉。

模板标签不包含内容

我看到在你的Javascript部分，你说，如果你创建一个元素。您需要启动代码。但是我没有看到你创建元素"template"

你应该在模板的content属性上使用querySelector():

var panelTitle = template.content.querySelector('div.panel-title');

相关文章：