javascript - 页面多次刷新/重新加载

Question

我正在学习 JavaScript 和backbone.js，并尝试开发一个小型网络应用程序。但问题是我的页面(图表)被重新加载了很多次(超出预期)。因此，在页面稳定并显示图表之前，页面会自动重新加载多次(超快)。当我说“重新加载浏览器”时，我的意思是说谷歌浏览器刷新图标的重新加载图标刷新/(向前旋转，向后旋转)多次，最后显示数据。

下面是我迄今为止尝试过的简短版本。由于我正处于学习阶段，我可能没有制定正确的编码标准。请耐心听我说。

所以，我必须在首页上显示一个图表(稍后我需要在同一页面上添加更多图表)。图表的数据来自 REST 服务。

HTML:

我有一个 anchor 和一个用于显示图形数据的模板。

 <div id ="chartAnchor1"></div>
<script id="myChart-template" type="text/template">
    <canvas id="lineChart"></canvas>
    </script>

View 模型

这是针对图表特定数据的:

  var firstSubViewModel = Backbone.View.extend({
    template: _.template($('#myChart-template').html()),
    events: {
  'click .Refresh': 'fetchModelData'
    },
      fetchModelData: function() {
      this.model.initialize();
    },
    render: function() 
    {
      $(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: [{
            data: this.model.attributes.incThisYear
          }, {
            data: this.model.attributes.incLastYear
          }]
        },
                labelString: 'Income in $'
              }
            }]
          }
        }
      });
    },
   initialize: function() {
      _.bindAll(this, "fetchModelData");
      this.model.on('change', this.render, this);
    }
  });

  return firstSubViewModel;
});

Controller :

  var ch = new dashboardModel.chart({});
  if (// some condition) {
    var data = { // some data};
    ch.fetch(data)
  }     
  //Main Graph on Dashboard
  new firstSubViewModel({
    el: '#chartAnchor1',
    model: ch
  });

});

型号:我有一个模型类，它从 REST 服务获取数据。

问题:页面刷新了大约 5-6 次，最终图表完美加载。

脚注:我的渲染函数有问题吗？请指导。

Answer 1

您已使用 this.model.on('change', this.render, this); 将模型的更改事件绑定(bind)到 View 的渲染方法。这意味着对于模型的每次更改， View 都会重新渲染。

并且您将模型属性直接传递给某些 Chart()功能。我们不知道其中发生了什么，但作为图表绘制的一部分，它很可能会多次更新模型属性，显然每次更改都会导致另一个 render它调用 Chart()再次调用 render 方法因此会创建一个渲染循环，该循环可能与 Chart() 对模型所做的更改数量一样长功能。

删除this.model.on('change', this.render, this);或使用型号的 toJSON() 方法获取其数据的副本并将其传递给 chart()绘图方法。像这样的用例就是 toJSON() 的原因方法已存在。

<小时/>

另一个问题是处理异步 fetch ，我认为this.model.on('change', this.render, this);你试图处理这个问题，但这是错误的。您应该监听诸如 sync 之类的事件相反，就像

this.model.on('sync', this.render, this);

或者做类似的事情:

var ch = new dashboardModel.chart({});
/* ---------------------------^ this is the actual model constructor?
 Then what's dashboardModel?! Bad naming ;) */

ch.fetch({
  success: function(model, response) {
    new firstSubViewModel({
      el: '#chartAnchor1',
      model: ch
    });
  }
});

<小时/>

除此之外，您不应该手动初始化模型。这是由 Backbone.js 处理的一次性事件，只需在其中添加一次性初始化代码。我什至无法想象您试图通过手动调用 initialize 来实现什么目标在已经初始化的模型上。

要从持久层获取数据，您应该使用 fetch()方法。

fetchModelData: function() {
  this.model.fetch({/* options */});
}

<小时/>

您在 Controller 中的代码有很多问题。似乎尝试fetch()具有一些数据的模型？，但是fetch方法仅接受选项，主要用于自定义和处理 AJAX 调用，就像我上面使用的那样(也许它们实际上是选项，但您将其命名为数据？!忽略此在这种情况下是一个)。

还有一个 View 悬而未决，没有清理引用，通过 el 直接引用 DOM如果您创建 firstSubViewModel 的另一个实例，该选项将导致问题，使用on而不是 listenTo 等等都会导致经典的 Backbone.js 错误，例如内存泄漏、事件问题等。

所有这些都无法在答案中处理，因此我建议正确阅读文档并对常见的 Backbone.js 问题进行一些研究。

<小时/>

旁注:根据常见的命名转换，firstSubViewModel应该是FirstSubViewModel因为它是一个构造函数。