Question

在我的胡子模板中，我确实有类似的东西：

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

使用

渲染

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

确实产生了

<div ="test"></div>

我希望得到像

这样的东西

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

是否可以使用Mustache在标签内呈现属性名称？

更新

我弄明白了这个问题。我在我的文档中的自定义<template>标记内定义了我的HTML胡须模板。例如：

<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>

Answer 1

您也可以尝试使用 to_html 方法获得预期的输出。

const HTML = Mustache.to_html(template, {attr : 'data-test', attrVal : 'test'});

document.getElementById("myTemplate").innerHTML = HTML;

const template = `
	<div {{attr}}="{{attrVal}}">
	</div>
`

const HTML = Mustache.to_html(template, {attr : 'data-test', attrVal : 'test'});

document.getElementById("myTemplate").innerHTML = HTML;

console.log(document.getElementById("myTemplate").innerHTML);

<html>
	<head>
	</head>
	<body>
		<template id='myTemplate'>
    </template>
    <div id="display-output"></div>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.1.0/mustache.min.js"></script>
	</body>
</html>

Answer 2

希望此代码段能为您提供帮助..

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>

Answer 3

我遇到同样的问题尝试单[']：

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

.....

使用小胡子渲染HTML标记属性

3 个答案: