在 collection.fetch() 方法上刷新 table 视图

Question

考虑以下场景：-

- 球员模型

 var Player = Backbone.Model.extend({
         defaults: {
PlayerId: 0,
PlayerName: "",
IsActive: false
}
    });

Collection型号如下：

 var PlayerList = Backbone.Collection.extend({
            model: Player,
            url: '/Match/GetPlayers/'
        });

列表视图如下：

 var ListView = Backbone.View.extend({
        el: '#ListContainer',
        initialize: function () {
            _.bindAll(this, 'render');
            this.collection.on('reset', this.render);


        },
        render: function () {
            if (this.collection.length > 0) {
            this.collection.each(this.AppendPlayer, this);
            }
            return this;
        },
        AppendPlayer: function (data) {
            var palyerView= new PlayerView({ model: data });
            $(this.el).find('table').append(genreView.render().el);

        },
        events: {
            "click #btnplay": "CheckStatus"
        },

        CheckStatus: function () {

            // alert();
           //here i will make a ajax call and get update the status of player
             which comes from other REST service.
        }


    });

下面是播放器视图：

var PlayerView = Backbone.View.extend({
        tagName: "tr",            
        template: _.template($("#player-Template").html()),
        render: function () {

            this.$el.html(this.template(this.model.toJSON()));

        return this;
    }
    });

HTML如下：

<div id="ListContainer">
    <input type="button" id="btnplay" value="StatusCheck" />
    <table id="myTable">
        <tr>
            <td>Player Id</td>
            <td>Name</td>
            <td>Statu</td>
        </tr>

    </table>
</div>
<br />
<br />

<script id='player-Template' type='text/template'>
    <td><%=PlayerId%></td>
    <td><%=PlayerName%></td>    
    <td><%=IsActive%></td> 
</script>

所以当我单击 "Play" 按钮时，它会调用我的 API 服务并为我提供更新的 collection。

我尝试使用以下逻辑刷新 collection 和视图：

PlayerList.fetch({
                    success: function (collection, resp) {
                        //console.log('success' + resp); //

                    },
                    error: function (er) {
                        console.log('error: %o', er)
                    },
                    reset: true,

                });

我取回了更新后的模型，但实际情况是更新后的模型附加了现有行。

我需要清除现有行并用我的新行重新填充它 collection。

任何帮助都会很棒。

Answer 1

empty() render 方法里面的table:

render: function () {
  this.$el.find('table').empty(); // clears existing rows 
  if (this.collection.length > 0) {
     this.collection.each(this.AppendPlayer, this);
  }
  return this;
}

顺便说一句，您不必执行 $(this.el)，backbone 通过 this.$el.

提供视图元素的 jQuery 实例

除非您要重复使用 AppendPlayer（我建议对方法名称使用驼峰命名法。仅对构造函数使用 Pascal 命名法）方法，否则您可以简单地执行以下操作：

render: function() {
  var $table = this.$el.find('table');
  $table.empty();
  if (this.collection.length) {
    this.collection.each(function(model) {
      $table.append(new PlayerView({
        model: model
      }).render().el);
    });
  }
  return this;
}

并且如果您修改 playerView 以呈现自身，如下所示：

var PlayerView = Backbone.View.extend({
  tagName: "tr",
  template: _.template($("#player-Template").html()),
  initialize: function() {
    this.render();
  },
  render: function() {
    this.$el.html(this.template(this.model.toJSON()));
    return this;
  }
});

你可以这样做：

render: function() {
  var $table = this.$el.find('table');
  $table.empty();
  if (this.collection.length) {
    this.collection.each(function(model) {
      $table.append(new PlayerView({
        model: model
      }).el);
    });
  }
  return this;
}

旁注：您似乎在创建 palyerView 但您在附加 genreView ..?!

在 collection.fetch() 方法上刷新 table 视图

Refresh the table view on collection.fetch() method

jquery

backbone.js

backbone-views