1

新しいモデルが (コレクションの "set" 関数を介して) 追加されると、最後ではなく、ソート順を維持するインデックスにモデルを挿入する必要があります。

ありがとう

var Ts = (function () {
  var Result = Backbone.Model.extend({
   idAttribute : 'PAG_ID'
  });

  var ResultList = Backbone.Collection.extend({
    model: Result,
    comparator: function(result) {
     //console.log(result);
     return result.get('SORT_KEY');
   },
  });

var resultsCollection = new ResultList(data);

data = undefined;
var TableView = Backbone.View.extend({
 tagName: 'table',

initialize : function() {
    _.bindAll(this, 'render', 'renderRow');
    this.collection.on("add", this.renderRow, this);
},

render: function() {
  $(this.el).attr('id', 'tsTable').addClass('resulttable');
  this.renderHeader(this.collection.shift());
  this.collection.each(this.renderRow);
  return this;
},

renderHeader : function(model) {
  var col=new HeaderView({model:model});
  this.$el.append(col.render().$el);
  return this;
},

renderRow : function(model) {
  var row=new RowView({model:model});
  this.$el.append(row.render().$el);
  return this;
}

});

var HeaderView = Backbone.View.extend({
tagName: 'tr',

model: resultsCollection.models,

initialize: function() {
  this.model.on('change',this.render,this);
},

render: function() {
  var html=_.template(colTemplate,this.model.toJSON());
  this.$el.html(html);
  return this;
}

});

var RowView = Backbone.View.extend({
tagName: 'tr',

initialize: function() {
  this.model.on('all',this.render,this);
},

remove: function () {
    debug.log("Called remove event on model");
    $(this.el).remove();
},

model: resultsCollection.models,
  render: function() {
  var html=_.template(rowTemplate,this.model.toJSON());
  this.$el.html(html);
  return this;
},

attributes : function () {
  return {
    id : this.model.get('PAG_ID')
  };
}

});

var tableView = new TableView({collection: resultsCollection});
$("body").append( tableView.render().$el );


 resultsCollection.set(initialdata);
 resultsCollection.set(someotherdata, {merge: true});

以下のように変更しましたが、動作します。これが最適な実装かどうかはわかりません

 renderRow : function(model) {
  var row = new RowView({model:model});
  var index = model.get('SORT_KEY') - 1;
  row.render().$el.insertAfter(this.$el.find('tr:eq('+ index  +')'));
  return this;
}
4

1 に答える 1

0

コレクションにコンパレータ関数を提供すると、 Collection.set は、新しいモデルが接合された後にサイレントソートを実行します。

バックボーン ソースhttp://backbonejs.org/docs/backbone.htmlから:

set: function(models, options) {
  var sortable = this.comparator && (at == null) && options.sort !== false;
  var sortAttr = _.isString(this.comparator) ? this.comparator : null;
  ...

  if (toAdd.length) {
    if (sortable) sort = true;
    this.length += toAdd.length;
    if (at != null) {
      splice.apply(this.models, [at, 0].concat(toAdd));
    } else {
      push.apply(this.models, toAdd);
    }
  }

  if (sort) this.sort({silent: true});

これは、 collection.set がコンパレーターを尊重することを示すフィドルです。

http://jsfiddle.net/puleos/sczV3/

于 2013-05-22T18:57:09.693 に答える