Jquery 刷新collection.fetch（）方法的表视图

考虑以下场景：-

-玩家的模型

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

收集模式如下：

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

<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>

列表视图如下所示：

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

<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>

下面是PlayerView:

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

<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>

HTML如下所示：

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

<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>

我得到了更新后的模型，但实际情况是更新后的模型得到了现有行的附加值

我需要清除现有行并用新集合重新填充它

任何帮助都很好。

渲染方法中的表：

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）

，主干网通过

this.el提供视图元素的jQuery实例

除非您正在重用
AppendPlayer
（我建议使用camelCase作为方法名。仅对构造函数使用pascal case）方法，否则您可以简单地执行以下操作：

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
 好的，快点$table.empty（）是否也清除了表标题？如何避免/重新创建them@Darshan假设您的头在
内，则清空
：
var$table=this.$el.find（'table tbody'）