Question

我是Backbone的初学者，试图获取一个示例页面并运行Carousel的多个实例。这是我的HTML的样子

<div class="en-carousel" id="one" data-href="/js/models/json/carousel.json" data-content-id=""></div>
<div class="en-carousel" id="two" data-href="/js/models/json/carousel2.json" data-content-id=""></div>
<div class="en-carousel" id="three" data-href="/js/models/json/carousel3.json" data-content-id=""></div>

使用Model获取数据，并且视图的render方法迭代View对象的“el”对象。模型提取与成功处理程序相关联，成功处理程序启动轮播。控制器代码看起来像

define([
  'jquery',
  'backbone',
  'handlebars',
  'text!view/carousel.html',
  'plugin/jquery.bxslider.min',
  'TPL'
], function($, Backbone, Handlebars, carouselTemplate, $bx, TPL){

  var CarouselModel = Backbone.Model.extend({
    setURL: function(url){
      this.url = url;
    }
  });

  var CarouselView = Backbone.View.extend({
    el: '.en-carousel',
    model: new CarouselModel(),
    initialize: function () {

    },
    render: function () {
      var that = this;
      this.$el.each(function(){

        //that.model.url = $(this).data('href');
        that.model.setURL($(this).data('href'))

        that.listenTo(that.model,'change', that.onSuccess);
        that.model.fetch();

      });


    },

    onSuccess: function(response, status, xhr){

      var tpl = window["ENX"]["templates/handlebars/carousel.html"](this.model.get('response'));
      $(this.el).append(tpl);
      $(this.el).find('ul.carousel').bxSlider();

    },

    ajaxFail: function(){
      alert(2)
    }
  });
  return CarouselView;
});

我正在使用Handlebars进行模板化。这里的问题是listenTo事件在n个实例中被触发n * n次。因此，对于3个旋转木马，我总共得到9个旋转木马，所有这些旋转木马都附加到div#one

Answer 1

解决方案很简单：在模型更改时替换el的全部内容。

initialize: function () {
    this.model.fetch().done(function () {
        this.render();
        this.listenTo(this.model,'change', this.render.bind(this));
    }.bind(this));
},

render: function () {
    var tpl = window["ENX"]["templates/handlebars/carousel.html"](this.model.get('response'));
    this.$el.html(tpl);
    this.$el.find('ul.carousel').bxSlider();
}

也无需迭代el，因为它只是一个元素。

在Backbonejs中使用相同视图的多个模型

1 个答案: