javascript - 使用模板渲染 Backbone.js 集合

Question

我一直在主干上工作。但我要锁定集合和 View 。

Javascript 在这里有一个模型、一个集合、一个 View :

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>

非常感谢。 Backbone 文档很棒，但我不知道为什么它不起作用......

Answer 1

1. 将标记和模板分开。您的模板将被您的 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>
   

2. 将实例传递给 View 构造函数，而不是类:

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

3. 在构造 View 后调用它render。按原样，您的集合不会重置，也不会触发渲染。

   lieuView.render();
   

4. 将正确的参数传递给模板:您使用 lieux 变量，但不在任何地方声明它

   var Content = this.template({
       lieux: this.collection.toJSON()
   });
   

这似乎是一个有效的演示 http://jsfiddle.net/nikoshr/cKBY6/1/

<小时/>

注释:

• 请决定类和变量要使用的情况，否则最终会一团糟。例如，您将 lieu 和 LieuCollection 作为类，将 Collection 和 lieuView 作为实例
• 绑定(bind)已经发展，通常声明为 this.listenTo(this.collection, "reset", this.render, this)
• 同样，使用缓存的 jQuery 对象 this.$el而不是 $(this.el)
• 不要在 View 类中声明静态el，将其作为参数传递:var lieuView = new LieuView({collection: Collection, el: '.slider'}) ;