☰

マスタッシュを使用してHTMLタグ属性をレンダリングする 質問する

tag-icon • tag-icon javascript html mustache
マスタッシュを使用してHTMLタグ属性をレンダリングする 質問する

私の口ひげテンプレートには次のようなものがあります:

<div {{attr}}="{{attrVal}}"></div>

これをレンダリングするには

Mustache.render(template, {attr : 'data-test', attrVal : 'test'})

生産する

<div ="test"></div>

私は次のようなものを期待しています

<div data-test="test"></div>

Mustache を使用してタグ内に属性名をレンダリングすることはできないでしょうか?

アップデート

問題が分かりました。<template>ドキュメント内のカスタム タグ内に HTML Mustache テンプレートを定義します。例:

<template id='myTemplate'>
    <div {{dataAttr}}="{{dataAttrValue}}"></div>
</template>

ブラウザを使用してテンプレートを取得すると、属性は大文字と小文字を区別しないため、をにdocument.querySelector("#myTemplate").innerHTML変換します。そのため、{{dataAttr}}{{dataattr}}

Mustache.render(
    document.querySelector("#myTemplate").innerHTML, 
    { dataAttr : 'data-attr', dataAttrValue : 'test'}
);

結果は

<div ="test"></div>

ベストアンサー1

このコードスニペットがお役に立てば幸いです。

var template = document.querySelector("#template").innerHTML;
//Mustache.parse(template); // optional, speeds up future uses
var rendered = Mustache.render(template, {
  attr: "data-test",
  attrVal: "test"
});
document.querySelector("#target").innerHTML = rendered;
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.2.1/mustache.js"></script>
<body>
  <div id="target">Loading...</div>
  <template id="template" >
    <textarea style="width:300px">
      <div {{attr}}="{{attrVal}}"></div>
    </textarea>
  </template>
  
</body>

おすすめ記事