我正在使用bootstrap v3 这个过程工作正常而不使用js模板，一旦我使用handelbars，前一个按钮就会崩溃并抛出错误（Uncaught TypeError：无法读取属性＆＃39; slice＆＃39; of undefined），索引位置为0 I猜测 当使用上一个按钮从第一个元素转换到最后一个元素时出现问题，当然，活动类在某处丢失了
任何人都可以提供帮助
这是我的HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<div id="carouselWrap" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carouselWrap" data-slide-to="0" class="active"></li>
<li data-target="#carouselWrap" data-slide-to="1"></li>
<li data-target="#carouselWrap" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<script id="template" type="text/x-handlebars-template">
{{#each this}}
{{#if counter}}
<div class="item active">
{{else}}
<div class="item ">
{{/if}}
<table>
<tbody>
<tr>
<td> {{product1.name}} {{decode product1.surname}}</td>
<td>{{price product1.lastprice}} </td>
<td>{{decodeproduct1.supplier}} </td>
<td>{{product1.nation}} </td>
<td>{{product1.sport}} </td>
<td>{{product1.divStart}} - {{product1.divEnd}} </td>
<td>{{{decode product1.divScenarioGood}}}</td>
<td><a href="{{decode product1.name}}-{{decode product1.surname}}">link</a></td>
</tr>
<tr>
<td>{{product2.name}} {{decode product2.surname}}</td>
<td>{{price product2.lastprice}} </td>
<td>{{decode product2.supplier}} </td>
<td>{{product2.nation}} </td>
<td>{{product2.sport}} </td>
<td>{{product2.divStart}} - {{product1.divEnd}} </td>
<td>{{decode product2.divScenarioGood}}</td>
<td><a href="{{decode product2.name}}-{{decode product2.surname}}">link</a></td>
</tr>
</tbody>
</table>
</div>
{{/each}}
</script>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carouselWrap" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carouselWrap" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script>
(function() {
var Hbs = {
init: function( config ) {
this.url = config.url;
this.container = config.container;
this.template = config.template;
this.fetch();
},
fetch: function() {
var self = this;
$.getJSON( self.url, function( data ) {
var template = Handlebars.compile( self.template );
Handlebars.registerHelper('toLowerCase', function(str) {
return str.toLowerCase();
});
Handlebars.registerHelper('price', function(val) {
return Math.round(val);
});
Handlebars.registerHelper('elmId', function(id) {
return id;
});
Handlebars.registerHelper('decode', function(str) {
try{
return decodeURIComponent(escape(str));
}catch(e){
// catch the error
console.log(e.message);
}
});
var positionCounter = 0;
Handlebars.registerHelper('counter', function() {
positionCounter++;
if (positionCounter == 1 )
return positionCounter;
else
return false;
});
self.container.append( template( data ) );
});
}
}
Hbs.init({
url : 'athletes.json',
container: $('.carousel-inner'),
template: $('#template').html()
});
})();
</script>
</body>
</html>
athletes.json
[
{
"@class": "com.tradeinsports.domain.product.ProductPair",
"product1": {
"@class": "com.tradeinsports.domain.product.ProductSubset",
"name": "Alexander",
"surname": "Bj\u00c3\u00b6rk",
"shortname": "A Bj\u00c3\u00b6rk",
"sport": "Golf",
"nation": "Sweden",
"supplier": "V\u00c3\u00a4xj\u00c3\u00b6 GK",
"status": "Locked",
"lastprice": 50.497987979,
"divStart": "2012-07-19",
"divEnd": "2013-12-25",
"contractType": "Travprodukt standard",
"divScenarioGood": "Topp 10 p\u00c3\u00a5 European tour 2016\r\n",
"divScenarioGoodRevenue": -10000,
"smallImage": "litenNyBjork.jpg"
},
"product2": {
"@class": "com.tradeinsports.domain.product.ProductSubset",
"name": "Felix",
"surname": "Rosenqvist",
"shortname": "F Rosenqvist",
"sport": "Motor",
"nation": "Sweden",
"supplier": "Mercedes",
"status": "Locked",
"lastprice": 100,
"divStart": "2012-12-29",
"divEnd": "2021-02-24",
"contractType": "Motor standard",
"divScenarioGood": "4 s\u00c3\u00a4songer i Formel 1 fram till 2021\r\n",
"divScenarioGoodRevenue": 12960,
"smallImage": "FelixFarg.jpg"
}
},
{
"@class": "com.tradeinsports.domain.product.ProductPair",
"product1": {
"@class": "com.tradeinsports.domain.product.ProductSubset",
"name": "sabri",
"surname": "zouari",
"shortname": "Wild Life",
"sport": "Trotting",
"nation": "Sweden",
"supplier": "R Bj\u00c3\u00b6rkroth",
"status": "Locked",
"lastprice": 200,
"divStart": "2014-04-16",
"divEnd": "2016-05-14",
"contractType": "Travprodukt standard",
"divScenarioGood": "2.000.000 i insprugna prispengar + 5.000.000 fr\u00c3\u00a5n f\u00c3\u00b6rs\u00c3\u00a4ljning\r\n",
"divScenarioGoodRevenue": 27900,
"smallImage": "wildLifeProd2.jpg"
},
"product2": {
"@class": "com.tradeinsports.domain.product.ProductSubset",
"name": "Rasmus",
"surname": "Lindh",
"shortname": "R Lindh",
"sport": "Motor",
"nation": "Sweden",
"supplier": "Captimax",
"status": "Locked",
"lastprice": 100,
"divStart": "2019-01-01",
"divEnd": "2029-12-15",
"contractType": "Motor Total",
"divScenarioGood": "10 s\u00c3\u00a4songer i Formel 1 fram till 2029\r\n",
"divScenarioGoodRevenue": 4840,
"smallImage": "rasmusSmallSyst.jpg"
}
},
{
"@class": "com.tradeinsports.domain.product.ProductPair",
"product1": {
"@class": "com.tradeinsports.domain.product.ProductSubset",
"name": "Andreas",
"surname": "Siljestr\u00c3\u00b6m",
"shortname": "A Siljestr\u00c3\u00b6m",
"sport": "Tennis",
"nation": "Sweden",
"supplier": "KLTK",
"status": "Market",
"lastprice": 100,
"divStart": "2013-12-01",
"divEnd": "2016-12-01",
"contractType": "Tennis",
"divScenarioGood": "Topp 10 ATP dubbelranking 2016\r\n",
"divScenarioGoodRevenue": 1050,
"smallImage": "siljestromLiten.jpg"
},
"product2": {
"@class": "com.tradeinsports.domain.product.ProductSubset",
"name": "Gabriel",
"surname": "Axell",
"shortname": "G Axell",
"sport": "Golf",
"nation": "Sweden",
"supplier": "Vadstena GK",
"status": "Market",
"lastprice": 100,
"divStart": "2014-04-15",
"divEnd": "2018-04-15",
"contractType": "Travprodukt standard",
"divScenarioGood": "Topp 10 p\u00c3\u00a5 Europatouren 2017",
"divScenarioGoodRevenue": 1990,
"smallImage": "litenGabbeSyst.jpg"
}
}
]
答案 0 :(得分：0)
我遇到了与Django模板系统相同的问题，但我解决了重写这样的if语句（假设计数器从1开始）
{{#if counter = 1}}
<div class="item active">
{{else}}
<div class="item ">
{{/if}}
答案 1 :(得分：0)
我遇到了同样的问题并且几个小时都在寻找解决方案，但这是......小错误 - 我的控件在div class =＆＃34; item＆＃34;在内部。）））确保控件在couresel的项目之外