0

テンプレートにラップされた 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 要素をプルしていないように見えるためだと思います。進め方がわからない。

4

2 に答える 2

0

querySelector()テンプレートのcontentプロパティで使用する必要があります。

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

あなたが提供したリンクで説明されているように。

于 2018-06-25T11:33:09.203 に答える