渲染Backbone.js的集合與模板

我一直在努力骨幹。但我要鎖定收集和查看。渲染Backbone.js的集合與模板

的JavaScript在這裏與一個模型，一個集合，一個觀點：

var lieu = Backbone.Model.extend({ 
    defaults: { 
    Lieu: '', 
    Activite: '', 
    ImagePrincipal: '', 
    Gallery:'', 
    Texte:'' 
    } 
}); 

var LieuCollection = Backbone.Collection.extend({ 
    model : lieu 
}); 

var LieuView = Backbone.View.extend({ 
    el: '.slider', 

    initialize: function() { 
    this.template = _.template($("#lieu_template").html()); 
    this.collection.bind("reset", this.render, this); 
    }, 

    render: function() { 
    var Content = this.template(this.collection.toJSON()); 
    $(this.el).html(Content); 
    return this; 
    } 
}); 

$(function() { 
    var Collection = new LieuCollection(); 

    Collection.add(
    new lieu({ 
     Lieu: 'Lorem 1', 
     Activite: 'Lorem 2', 
     ImagePrincipal: 'http://lorempixel.com/g/1200/800/sports/', 
     Gallery: [ 
      'http://lorempixel.com/g/1200/800/AAA/', 
      'http://lorempixel.com/g/1200/800/BBB/', 
      'http://lorempixel.com/g/1200/800/BBB/', 
      'http://lorempixel.com/g/1200/800/BBB/' 
     ], 
     Texte: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam gravida purus eros, id tempus elit ullamcorper vitae. Fusce faucibus velit diam, vitae pulvinar dui convallis eu. In non sem sit amet odio lobortis dignissim id a nisl. Nulla ut metus elementum, iaculis lacus non, laoreet risus. Aliquam placerat tempus dapibus. Nam ut tristique odio, sed consequat justo. Integer id nislat ante ultrices dictum.' 
    }) 
); 

    var lieuView = new LieuView({collection: LieuCollection}); 
});

與模板的HTML，它的確定？：

<section id="events" role="events" data-id="events" class="line w100 center"> 
     <div class="eventSlider"> 
      <div class="slider"> 

       <script type="text/template" id="lieu_template"> 
       <% _.each(lieux, function(lieu) { %> 
       <div class="item"> 
        <div class="intro"> 
         <div class="midway-horizontal midway-vertical"> 
          <h1><%= lieu.Lieu %></h1> 
          <p><%= lieu.Activite %></p> 
         </div> 
        </div> 

        <img src= "<%= lieu.ImagePrincipal %>" /> 
       </div> 
       <% }); %> 
       </script> 

      </div> 
     </div> 
    </section>

非常感謝。文檔骨幹是偉大的，但我不知道爲什麼它不工作...

來源

2014-03-13 Dossp

究竟是什麼不起作用？你在期待什麼，你究竟看到了什麼？ – Hazaart

分開你的標記和你的模板。您的模板將通過您的view.render被覆蓋，並且會從將來參考

<section id="events" role="events" data-id="events" class="line w100 center"> 
    <div class="eventSlider"> 
     <div class="slider"> 
     </div> 
    </div> 
</section> 

<script type="text/template" id="lieu_template"> 
<% _.each(lieux, function(lieu) { %> 
<div class="item"> 
    <div class="intro"> 
     <div class="midway-horizontal midway-vertical"> 
      <h1><%= lieu.Lieu %></h1> 
      <p><%= lieu.Activite %></p> 
     </div> 
    </div> 
    <img src= "<%= lieu.ImagePrincipal %>" /> 
</div> 
<% }); %> 
</script>

消失傳遞一個實例給您的視圖的構造函數，而不是類：
```
var lieuView = new LieuView({collection: Collection}); 
```
打電話給你的看法render建設之後。現在，您的收藏不會重置，也不會觸發渲染。
```
lieuView.render(); 
```
傳遞正確的參數到您的模板：您使用lieux變量，但你沒有任何位置聲明它
```
var Content = this.template({ 
    lieux: this.collection.toJSON() 
}); 
```

什麼似乎是一個工作演示http://jsfiddle.net/nikoshr/cKBY6/1/

注：

讓你的心在你想使用類和變量的情況下，否則你會用一塌糊塗結束。例如，你有lieu和LieuCollection如類，Collection和lieuView作爲實例
綁定進化和通常聲明爲this.listenTo(this.collection, "reset", this.render, this)在同樣
，使用緩存jQuery對象的this.$el代替$(this.el)
不要」 t在視圖類中聲明一個靜態el，並將其作爲參數傳遞給：var lieuView = new LieuView({collection: Collection, el: '.slider'});

來源

2014-03-13 09:39:11 nikoshr

非常感謝:) 我明白我的錯誤 – Dossp

渲染Backbone.js的集合與模板

回答

相關問題