0

私はバックボーンに入ろうとしており、画像ギャラリーを実行しようとしている次のものがあります。コレクション内のモデルで render を使用しようとしています。コレクションの最初の要素を表示しますが、次の要素で単純に再レンダリングするためのサポートを追加したいのですが、これを行う方法がわかりません。

次のように、モデルに次と前を実装しました。

arc.Item = Backbone.Model.extend({
    next: function () {
        if (this.collection) {
            return this.collection.at(this.collection.indexOf(this) + 1);
        }
    },previous: function () {
        if (this.collection) {
            return this.collection.at(this.collection.indexOf(this) - 1);
        }
    }
});

ここでの問題 (私が質問しているもの以外にも問題がある可能性があります) は、loadNext メソッドにあります。このコレクション内の現在の場所を取得してインクリメントするにはどうすればよいですか?

arc.ItemsGalleryView = Backbone.View.extend({
      el: $('#mig-container'),
    events: {'click .next-btn' : 'loadNext', 
             'click .previous-btn':'loadPrevious' },
       template:_.template($('#mig-image-tmp').text()),
      initialize: function() {
          _.bindAll( this, 'render' );
          // render the initial state
          var thisModel=this.collection.first();
          this.render(thisModel);
      },

      render: function(xModel) {  // <- is it ok to do it this way?
          var compiled=this.template(xModel.toJSON());
          this.$el.html(compiled);
          return this;
      },

      loadNext: function(){
        console.log('i want to load Next');
        this.render(this.collection.next());  // <- how would I do this
        this.render(this.collection.first().next());  // <- this works by always giving me the second.
        // I need to replace first with current

      },
      loadPrevious: function(){
        console.log('i want to load Previous');
      }

または、これを実装するより良い方法はありますか?

thx事前に

編集＃1 

 arc.ItemsGalleryView = Backbone.View.extend({
        el: $('#mig-container'),
        events: {'click .next-btn' : 'loadNext', 'click .previous-btn':'loadPrevious' },
         template:_.template($('#mig-image-tmp').text()),
        initialize: function() {
          _.bindAll( this, 'render' );
          this.render(this.collection.first());  // <- this works correct
        },

        render: function(xModel) {
          console.log(xModel.toJSON());
          var compiled=this.template(xModel.toJSON());
          this.$el.html(compiled);
          return this;
        },
        loadNext: function(){
          console.log('i want to load next');
          this.render(this.collection.next());   // <- this doesn't seem to do anything, event is called correctly but doesn't seem to move to next element
        },

    However if I adjust to this, it will load the 3rd element of the array

loadNext: function(){
  console.log('i want to load Previous');
  this.render(this.collection.at(2));
},

this.collection.next() を使用してこの動作を取得するにはどうすればよいですか?

どうも

4

2 に答える 2

1

kalleyの答えは正しいですが、別の例を挙げます。

現在のモデルをモデル内に保持するというアイデアを楽しみ、stateそこから作業します。stateモデル内に他のアプリケーション情報も保存できます。

モデル宣言は次のようになります。previousに名前を変更したことに注意してくださいprev。Backbone.Modelにはすでにpreviousメソッドがあり、それをオーバーライドしたくありません。

var Model = Backbone.Model.extend({
  index:function() {
    return this.collection.indexOf(this);
  },
  next:function() {
    return this.collection.at(this.index()+1) || this;
  },
  prev:function() {
    return this.collection.at(this.index()-1) || this;
  }
});

Backbone.Model選択したモデルを保持するジェネリックを用意します。

var state = new Backbone.Model();

ビューでは、状態モデルへの変更をリッスンし、それに応じてレンダリングします。

var View = Backbone.View.extend({
  el: '#mig-container'
  template:_.template($('#mig-image-tmp').html()),
  events: {
    'click .prev' : 'prev',
    'click .next' : 'next'
  },
  initialize:function() {
    this.listenTo(state,'change:selected',this.render);
    state.set({selected:this.collection.at(0)});
  },
  render:function() {
    var model = state.get('selected');
    this.$el.html(this.template(model.toJSON()));
    return this;
  },
  next:function() {
    // get the current model
    var model = state.get('selected');

    /* Set state with the next model, fires a change event and triggers render.
       Unless you are at the last model, then no event will fire.
     */
    state.set({selected:model.next()});
  },
  prev:function() {
    var model = state.get('selected');
    state.set({selected:model.prev()});
  }
});

ここにデモがあります。stateモデル内にアプリケーションの状態情報を格納していないため、モデル アプローチが気に入っています。

モデルのアプローチが気に入らない場合はstate、いつでも床に投げることができます。

/ .. code above ../

initialize:function() {
  this.model = this.collection.at(0);
  this.render();
},
render:function() {
  this.$el.html(this.template(this.model.toJSON()));
  return this;
},
next:function() {
  this.model = this.model.nxt();
  this.render();
},
prev:function() {
  this.model = this.model.prev();
  this.render();
}
于 2013-08-28T07:53:24.420 に答える