个人中心
gpt4 book ai didi

javascript - Bootstrap 轮播不适用于 Handlebars (上一个按钮)

转载 作者：行者123 更新时间：2023-11-28 08:15:40 31 4
gpt4 key购买 nike

我正在使用 bootstrap v3该过程在不使用js模板的情况下工作正常，一旦我使用handelbars，前一个按钮将崩溃并抛出错误(未捕获的类型错误:无法读取未定义的属性“切片”)，我猜索引位置为0当然，使用上一个按钮从第一个元素转换到最后一个元素时会出现问题，“事件类在某处丢失”

谁能帮忙

这是我的 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>
<小时/>

运动员.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"
    }
  }
]

最佳答案

我在 Django 模板系统中遇到了同样的问题，但我解决了像这样重写 if 语句的问题(假设计数器从 1 开始)

{{#if counter = 1}}
  <div class="item active"> 
{{else}}
   <div class="item "> 
{{/if}}

关于javascript - Bootstrap 轮播不适用于 Handlebars (上一个按钮)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23626092/

31 4 0
文章推荐： javascript - SRC属性为空且性能不佳
文章推荐： javascript - 禁用 alt 复选框
文章推荐： javascript - 发送ajax请求但没有得到正确的结果.Js
文章推荐： javascript - 具有嵌套 View 的 MVC
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com