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 に答える