Question

请考虑以下情景： -

- 玩家模型

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


    });

以下是PlayerView：

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>

所以当我点击“播放”按钮时，它会调用我的API服务并获取更新的集合。

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

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

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

                });

我得到了更新的模型，但更新的模型get附加了现有的行。

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

任何帮助都会很棒。

Answer 1

empty() render方法中的表：

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 ..？！

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

1 个答案: