我在模板中包含了一些html,但是当我尝试激活模板并更改模板中的某些元素时,它会返回null。我在模板上做了一个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.ready
中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为null,但我认为这是因为在激活模板时,它似乎没有完成封装的html元素。我不确定如何继续。
答案 0 :(得分:0)
我在你的Javascript部分中看到你声明如果你创建一个元素。你需要启动代码。但我没有看到你把元素称为“模板”
答案 1 :(得分:0)
您应该在模板的querySelector()
属性上使用content
:
var panelTitle = template.content.querySelector('div.panel-title');
如您提供的链接中所述。