使用 backbone JS .get 模型事件连接元素索引

Question

使用 backbone JS 模型时遇到问题：item.get(element index)。我有一个包含 1248 个行项目的电子表格，我不想重复相同的代码 1248 次来引入所有数据。有什么办法可以连接这段代码并将所有元素索引放入一个事件中吗？

代码：

function showInfo(cameras) {
        var camera_view = new CameraView({ model: cameras.get(1) });

        $("#content").append( camera_view.render().el );

        var camera_view = new CameraView({ model: cameras.get(2) });

        $("#content").append( camera_view.render().el );

        var camera_view = new CameraView({ model: cameras.get(3) });

        $("#content").append( camera_view.render().el );

        etc.....all the way to 1248
      }

我正在使用 backboneJS 和 tabletopJS 从 "back-end" 上的 Google 电子表格中提取数据。谢谢

Answer 1

首选方法是使用 _.each 循环遍历集合并为每个模型呈现列表项。

function showInfo(cameras) {
  var cameraView;

  cameras.each(function(model) {
    camera_view = new CameraView({
      model: model
    });
    $("#content").append(camera_view.render().el);
  });
}

此外，由于您尝试渲染接近 1200 个视图，因此您将操纵 DOM 以在每次迭代中注入 HTML。而是将 HTML 存储在一个单独的变量中并一次注入以减少对 DOM

的操作

function showInfo(cameras) {
  var cameraView;
  var $content = $("#content");
  var html = '';

  $content.empty();

  cameras.each(function(model) {
    camera_view = new CameraView({
      model: model
    });
    html += camera_view.render().el
  });
  $content.append(html);
}

使用 backbone JS .get 模型事件连接元素索引

Concatenating element indexes with backbone JS .get model event

javascript

jquery

backbone.js