Question

我正在使用Backbone.js，我有四个显示4个图形的模板。一切都工作正常，但只有问题是我的页面刷新四次才能在UI上呈现所有图形。页面刷新发生得非常快。在页面/图形开始显示之前，chrome闪烁的刷新图标超快。

我正在使用jquery的when then来确保在视图开始渲染之前完全获取我的模型。此外，我为图的所有视图模型调用了this.render()四次。这显然需要，因为我有四个模板。有人可以指导我可能存在的问题。

first viewmodel:

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

对于所有四种视图模型都重复相同的事情。

一张图的实际视图模型：

define(['backbone'], function(Backbone) {
  var firstSubViewModel = Backbone.View.extend({
    template: _.template($('#myChart-template').html()),
    /**
     * render function. Renders data onto graph.
     * @param none
     */
    render: function() {
      console.log("inside first sub view render");
      $(this.el).html(this.template());
      var ctx = $(this.el).find('#lineChart')[0];
      var lineChart = new Chart(ctx, {
        type: 'line',
        data: {
          labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
          datasets: [{
            label: "This Year",
            backgroundColor: "rgba(38, 185, 154, 0.31)",
            data: this.model.attributes.incThisYear
          }, {
            label: "Last Year",
            backgroundColor: "rgba(3, 88, 106, 0.3)",
            borderColor: "rgba(3, 88, 106, 0.70)",
            data: this.model.attributes.incLastYear
          }]
        },
        options: {
          scales: {
            yAxes: [{
              scaleLabel: {
                display: true,
                labelString: 'Income in $'
              }
            }]
          }
        }
      });
    },

    initialize: function() {
      console.log("inside first sub view initialize");
      this.model.on('change', this.render, this);
      this.render();
    }
  });

  return firstSubViewModel;
});

Fiddler截图：

Answer 1

这是一个黑暗中的镜头但我相信问题在于你首先添加偶数监听器（this.model.on('change', this.render, this);），然后当你实际调用render()时它会检测到更改会再次触发render()。试着翻转它们：

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

页面呈现正确，但多次刷新

1 个答案: