骨干 - 试图重新描绘下一个或previous模型视图集合中 [英] backbone - trying to rerender a view with the next or previous model in a collection

问题描述

我试图进入骨干，有哪些是在做一个图片库的尝试以下。我试图用一个集合的模式呈现。我会告诉集合的第一个元素，但我想补充的只是下一个元素重新描绘支持，但我不知道如何做到这一点。

I am trying to get into backbone and have the following which is an attempt at doing an image gallery. I am trying to use render with a model in a collection. I will show the first element of the collection but I would like to add support for simply rerendering with the next element but I don't know how to do this .

我已经实现了我的模型像下面的一个和previous：

I have implemented next and previous on my model like the following:

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方法。我怎么会在此集合中获取当前位置，来增加它？

The problem here (there could be more than the one I am asking about though) is in the loadNext method. How would I get the current location in this collection and to increment it?

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');
      }

还是有实现这个更好的办法？

Or is there a better way to implement this?

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（）来获取这种行为？

How would I use this.collection.next() to get this behavior?

THX

推荐答案

kalley的答案是正确的，但我会在另一个例子扔。

kalley's answer is right on, but I will throw in another example.

我会招待从那里保持状态模式，并在里面工作当前模型的想法。您可以在状态模型中存储其他应用程序的信息也是如此。

I would entertain the idea of keeping the current model inside of state model, and work from there. You can store other application information within the state model as well.

您模型声明看起来像下面这样。请注意，我改名 previous 到 $ P $光伏。 Backbone.Model 中已经有 previous 方法和我们不希望过度骑它。

Your model declaration would look like the following. Notice I renamed previous to prev. Backbone.Model already has a previous method and we don't want to over-ride it.

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();

在视图中，您将监听状态的改变模型，并相应地呈现：

In the view you will listen for changes to the state model and render accordingly:

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()});
  }
});

下面是一个演示。我喜欢状态模式的方法，因为我不是我的模型中存储应用程序状态信息。

Here is a demo. I like the state model approach because I'm not storing application-state information within my models.

如果你不喜欢状态模式的方法，你可以永远只是把它扔在地上：

If you don't like the state model approach, you can always just throw it on the floor:

/ .. 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();
}

这篇关于骨干 - 试图重新描绘下一个或previous模型视图集合中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！