TA貢獻1863條經驗 獲得超2個贊
確保：
檢查您的 HTML 中是否存在該模板：
<script id="user-photos-template" type="text/x-handlebars-template">
{{#each user.photos}}
<span class="user-photo">{{this}}</span>
{{/each}}
</script>
編譯模板：
const template = (sel) => Handlebars.compile(document.querySelector(sel).innerHTML);
const userPhotosTemplate = template('#user-photos-template');
設置渲染數據的 HTML 文本：
document.getElementById('result').innerHTML = userPhotosTemplate(userData);
例子
const template = (sel) => Handlebars.compile(document.querySelector(sel).innerHTML);
const userPhotosTemplate = template('#user-photos-template');
const userData = {
user: {
name: 'Bob',
photos: ['a', 'b', 'c']
}
};
document.getElementById('result').innerHTML = userPhotosTemplate(userData);
.user {
display: flex;
flex-direction: column;
justify-content: center;
width: 10em;
height: 10em;
border: thin solid grey;
}
.user .user-name {
font-weight: bold;
text-align: center;
margin-top: 0.25em;
}
.user .user-photos {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
flex: 1;
}
.user .user-photos .user-photo {
width: 3em;
height: 3em;
line-height: 3em;
margin: 0.5em;
border: thin solid grey;
text-align: center;
text-transform: uppercase;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.6/handlebars.min.js"></script>
<div id="result"></div>
<script id="user-photos-template" type="text/x-handlebars-template">
<div class="user">
<div class="user-name">{{user.name}}</div>
<div class="user-photos">
{{#each user.photos}}
<span class="user-photo">{{this}}</span>
{{/each}}
</div>
</div>
</script>
舉報