0

是的，我是骨干和下划线的新手。首先让我说我已经阅读了所有在线示例，但我仍然缺少一些东西。

发生的事情是我正在加载我的对象列表，但是当我单击删除时，它会遍历所有对象。我知道这是因为我没有正确分配各个项目，但我看不出是什么原因造成的。

我很想得到一些帮助。

这是基本的html代码

<div id="itemid" class="view">            
      <span class="text">{{-text}}</span>
      <a id="dele" data-role="button" data-inline="true" data-icon='delete' >Delete</a>
</div>

这是我的项目列表代码

bb.view.List = Backbone.View.extend(_.extend({    
  tagName: "ul",

  initialize: function( items ) {
          var self = this
      _.bindAll(self)

      self.setElement('#itemid')

      self.elem = {
         text: self.$el.find('#text')
      }
      self.items = items

  },

      render: function(items) {
      var self = this

      self.$el.empty()

      self.items.each(function(item){
          var itemview = new bb.view.Item({
              model: item
          })
          itemview.render()
      })
  }

},scrollContent))

现在最后是单个项目的项目视图，请注意下面的模板代码。

bb.view.Item = Backbone.View.extend(_.extend({  
  tagName: "li",
  events: {
      'tap #dele': function(){ 
        var self = this
       self.removed()      
        return false;
      }  
  },  

    render: function(){
        var self = this
        _.bindAll(this)
        self.setElement('#itemid')

        self.elem = {
        dele: self.$el.find('#dele')
        }       

        var html = self.tm.item( self.model.toJSON() )
        $(this.el).append( html )  

    },

    removed: function()
    {
        var self = this
        this.model.removed();
    }
},{
    tm: {
      item: _.template( $('#itemid').html() )
    }
}))

希望有人可以帮助

标记

4

1 回答 1

0

我知道这与您的问题没有直接关系，但我有几个建议。你的代码：

你似乎var self = this; self.method()到处都在使用。this除非您需要进入闭包，否则不要这样做。但是，是的，当你进入each迭代器时你需要它。

您不需要调用_.bindAll(self)所有方法。同样，您最好显式绑定this到方法，例如：

this.collection.bind('reset', this.render, this);
this.el.on('click', 'a', this.handleClick.bind(this));

此时您可能没有意识到甚至可能根本不关心您的客户端资源，而是将您的环境绑定到this创建许多您永远不会使用的闭包（分配内存）。

现在有了您的问题，我将重构您的代码，如下所示：

var itemTmp = $('#itemid').html();

bb.view.Item = Backbone.View.extend({  
    tagName: "li",

    events: {
        'tap #dele': "deleteItem"
    },

    render: function(){
        this.el = _.template(itemTmp)(this.model.toJSON());
    },

    deleteItem: function() {
        this.model.destroy(); // deletes model
        this.remove(); // deletes view
    }
});


bb.view.List = Backbone.View.extend({    
    tagName: "ul",

    initialize: function(items) {
        this.setElement('#itemid');
        this.collection = items;
        this.render();
    },

    render: function() {
        var self = this; // yes, you will need it in the iterator

        this.$el.empty();

        this.collection.each(function(model){
            var itemview = new bb.view.Item({
                model: model
            });

            itemview.render();
            self.$el.append(itemview.el);
        });
    }

});

_.extend(bb.view.List.prototype, scrollContent);

请注意，Item视图不会将其 HTML 插入 DOM（或父视图元素）。基本上，当子视图或依赖项不访问父元素时，这是一种更好的做法。因此，您可以render()返回 HTML，也可以el从实例化它的模块访问 View 的实例属性。

最后的观察——当你有一个有很多视图的应用程序时，你不想为每个列表项创建新的视图实例。您最好插入具有唯一 ID 的 DOM 节点，然后在 DOM 事件上读取这些 ID 并解析项目 ID，并通过this.collection.get(id). 但同样，这是出于纯粹的性能考虑。

于 2012-10-23T06:26:12.767 回答