我有一个handlebars.js模板,就像这样:
{{externalValue}}
<select name="test">
{{#each myCollection}}
<option value="{{id}}">{{title}} {{externalValue}}</option>
{{/each}}
</select>
这是生成的输出:
myExternalValue
<select name="test">
<option value="1">First element </option>
<option value="2">Second element </option>
<option value="3">Third element </option>
</select>
正如所料,我可以访问每个元素的id和title字段myCollection来生成我的选择.在select之外,我的externalValue变量被正确打印("myExternalValue").
不幸的是,在期权的文本中,externalValue价值从未打印出来.
我的问题是:我怎样才能在循环内访问handlebars.js范围之外的变量？
一如既往,先谢谢.
我在这个Javascript/JSON/Handlebars事物上是全新的,我在使用两个嵌套级别获取JSON对象时无法在Handlebars模板中工作.
我已经用JSONLint验证了JSON对象,所以它是有效的JSON代码,但我不知道我是否有正确的JSON格式来使模板正常工作.:)(我正在另一个系统中手动构建JSON.)或许它是我错误的模板的语法.这就是我希望找到的......
简短说明:此对象是目录.我有章节,然后是每章内的电影.因此,电影是每个章节元素的嵌套元素.
我希望HTML输出类似于:
Chapter1: ChapterName
Movie1: MovieName
Movie2: MovieName
Chapter2: Chaptername
Movie1: MovieName
Movie2: MovieName
Movie3: MovieName
我似乎最终只得到了一个数据实例(我的JSON对象中的最后一个元素),或者我什么都没得到.(取决于我尝试的小调整或版本.)浏览器控制台不显示任何错误.
这是我到目前为止尝试使用的所有代码(脚本,HTML,模板等):
<!DOCTYPE html>
<html>
<head> <meta charset="UTF-8">
<title>Handlebars Demo</title>
<!-- dependant files -->
<script src="Handlebars.js"></script>
</head>
<!-- template -->
<script id="template2" type="text/x-handlebars-template">
<div>Chapter stuff:</div>
<ul>{{#each Chapter}}
<ol>{{@index}} {{ChapterName}}
{{#each movies}}
<li>Movie ID:{{movieIDnum}}</li>
{{/each}}
</ol>
{{/each}}
</ul>
</script>
<body><div id="main"></div></body>
<script>
var source = document.getElementById('template2').innerHTML;
var template = Handlebars.compile(source);
var data = {
"Chapter" : {
"ChapterName" : "Introduction",
"chapterNum" : "1", …