Question

我想使用车把模板来减少在卑尔根沼泽网站上呈现新闻所需的编码量。（bergenswamp.org）目前每个新闻项目都是用html编码的。一次显示两个新闻项目，可以使用滑块查看之前的新闻文章。我正在使用unislider（http://unslider.com/）浏览新闻。

当我添加车把模板时，我打破了滑块。以下是我的代码。我在控制台中没有出错。任何人都可以帮我弄清楚出了什么问题吗？谢谢

我创建了一个news.js模板

    var dataObject = {
    news_details:[
        {day2:28, month2:"February", year2:2016, title2:"Committee Meeting", news2:"Zurich Bog Committee Meeting", day1:16, month1:"February", year1:2016, title1:"Trustee Meeting", news1:"Held at Brighton Town Hall, 2300 Elmwood Avenue 7:30PM - 9:00PM"},
        {day2:8, month2:"February", year2:2016, title2:"<a class=\"tab-label\" href=\"http://geneseeorchid.org/geneseeorchid/\">Genessee Region Orchid Society</a>", news2:"President Steve Locke will be speaking at their monthly Meeting", day1:26, month1:"January", year1:2016, title1:"Eastern Massasauga Rattlesnake Conservation", news1:"Presented by John M. Adamski <br> Hosted by<a href=\"http://www.gvaudubon.org/\" class=\"jqmClose\"> Genesee Valley Audubon Society</a> 7:30PM - 9:00PM"},
        {day2:19, month2:"January", year2:2016, title2:"Trustee Meeting", news2:"Held at Brighton Town Hall, 2300 Elmwood Avenue 7:30PM - 9:00PM", day1:1, month1:"January", year1:2016, title1:"New website launched", news1:"The Bergen Swamp Preservation Society is excited to anounce it has a new website."}
    ]
}; // -> End of dataObject

var news = $("#news_list").html();
var h = Handlebars.compile(news);
var content = h(dataObject);

var news_results = document.getElementById("news_output");
news_results.innerHTML = content;

这是HTML

     <!-- LATEST NEWS -->
     <div id="latest-news">
        <div class="line">
          <h2 class="section-title">Latest News</h2> 
          <div class="margin">
<div class="news-slider">
<ul>
                <div id="news_output">
                    output news here.
                </div>

                <script type="text/x-handlebars-template" id="news_list">
                    {{#news_details}}
                    <li>
                        <div class="s-12 m-6 l-6">
                            <div class="s-12 l-2">
                                <div class="news-date">
                                    <p class="day">{{{day2}}}</p><p class="month">{{{month2}}}</p><p class="year">{{{year2}}}</p>
                                </div>
                            </div>
                            <div class="s-12 l-10">
                                <div class="news-text">
                                    <h4>{{{title2}}}</h4>
                                    <p>{{{news2}}}</p>
                                </div>
                            </div>
                        </div>
                        <div class="s-12 m-6 l-6">
                            <div class="s-12 l-2">
                                <div class="news-date">
                                    <p class="day">{{{day1}}}</p><p class="month">{{{month1}}}</p><p class="year">{{{year1}}}</p>
                                </div>
                            </div>
                            <div class="s-12 l-10">
                                <div class="news-text">
                                    <h4>{{{title1}}}</h4>
                                    <p>{{{news1}}}</p>
                                </div>
                            </div>
                        </div>
                    </li>
                    {{/news_details}}
                </script>
                <script type="text/javascript" src="js/news.js"></script>
            </ul>
            </div>
            <script src="lib/jquery-2.1.4.min.js"></script>
<script src="js/unslider-min.js"></script>

              <script>
                  jQuery(document).ready(function($) {
                      $('.news-slider').unslider();
                  });
              </script>

          </div><!--END Margin -->
        </div> <!--END line -->
     </div> <!--END LATEST NEWS -->

Answer 1

您的HTML标记不太正确。

尝试更改此内容：

<ul>
  <div id="news_output">
    output news here.
  </div>
  ...
</ul>

......对此：

<ul id="news_output">
  output news here.
</ul>
...

请参阅Unslider文档＆gt;安装＆amp;设置＆gt;设置HTML。

http://unslider.com/

工作示例：

http://codepen.io/david_i_smith/pen/YpMLeV?editors=1010#0

车把模板不显示unislider

1 个答案: