骨干监听器不开火

Backbone listenTo doesnt firing

本文关键字:开火 监听器      更新时间:2023-09-26

我是新的骨干,并试图运行以下代码。但我还是不明白。它不能正常工作。更清楚的是,当我创建集合时,listenTo没有捕捉到create事件。

我的代码

var levelIndex=0;
var app =  {};
$(function(){
  $('.datepicker').datepicker({
    format: 'dd/mm/yyyy',
    startDate: '-3d'
  });  
  //model
  app.Level = Backbone.Model.extend({
      defaults: {
          levelIndex:-1
      }
  });
  //collection
  app.Levels= Backbone.Collection.extend({
    model: app.Level,
    url:'#'
  });
  //views
  app.LevelView = Backbone.View.extend({
    events: {
      'click .addItems': 'addItems',
      'click .clearItems': 'clearItems',
      'click .removeLevel':'removeLevel'
    },
    addItems: function () {
      // add items
    },
    clearItems:function(){
      //
    },
    removeLevel:function(){
      //
    },
    tagName: 'div',
    className: 'level active',
    template: _.template($('#levelTemplate').html()),
    render: function () {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
  });
//levels view
  app.LevelsView = Backbone.View.extend({
    events: {
        'click .add': 'addLevel'
    },
    addLevel: function( e ) {
      e.preventDefault();
      console.log('inside add level function');
      var formData = {};
      formData['levelIndex']=levelIndex++;
      this.collection.create( formData );
      console.log('after creating collection');
    },  
    el: '#levels',
    initialize: function() {
    this.collection=new app.Levels(new app.Level());
      //following line of code doesnt work properly
      this.listenTo( this.collection, 'create', this.renderLevel );
    },
    // render levels view by rendering each level in its collection
    render: function () {
        this.collection.each(function (item) {
            this.renderLevel(item);
        }, this);
    },
    // render a level by creating a LevelView and appending the
    // element it renders to the levels' element
    renderLevel: function (item) {
      var levelView = new app.LevelView({
        model: item
      });
      this.$el.append(levelView.render().el);
    }
  });
  new app.LevelsView();
});

集合和模型上没有事件create。在您的案例中,您希望使用事件add,当模型添加到集合时触发。但是你会错过一个模型添加,因为你在开始听之前添加了第一个模型。

http://backbonejs.org/Events-catalog

关于Collection.create():

创建模型将导致立即在集合上触发"添加"事件,当新模型被发送到服务器时触发"请求"事件,以及一旦服务器响应成功创建模型时触发"同步"事件。如果您想在将新模型添加到集合之前等待服务器,则传递{wait: true}。