Question

我一直在研究骨干。但我要锁定集合并查看。

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>

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

Answer 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>

将实例传递给视图构造函数，而不是类：

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)
不要在您的视图类中声明静态el，将其作为参数传递：var lieuView = new LieuView({collection: Collection, el: '.slider'});

使用模板渲染Backbone.js集合

1 个答案: