javascript - 没有 $.get 的 Backbone 渲染外部模板

Question

我的应用程序有一个小错误。

加载外部模板时出现渲染问题。

我有一个包含主干应用程序的 js 文件和一个用于模板的单独 html 文件。

我需要在我的应用程序中创建循环函数。

这是我的渲染函数:

_.each(here.data_table.models, function(t) {
   $.get('js/template.html', function (data) {
         template = _.template(data, {data: t});//Option to pass any dynamic values to template
         $(here.el).find('tbody').append(template);
    }, 'html');
});

如果我打印here.data_table.models，我可以按正确的顺序查看我的所有集合。

但是当我打印时，顺序不是那样的，是随机的。

所以我认为问题是 $.get 调用，因为它是异步的。

是否存在一种方法可以在同步模式下进行相同的操作以按原始顺序加载我的数据？

示例:

如果我打印属性顺序，这是我的 here.data_table.models 简化版:

1
2
3
4

如果我将 console.log 放入 $.get 函数中，我可以得到:

3
2
4
1

另一个订单不是原始订单，因为是异步的。

有人可以帮助我吗？

谢谢

Answer 1

您的问题是，AJAX 调用何时完成没有保证顺序。但是，您只需要一次 AJAX 调用，因为您的 $.get 会一遍又一遍地获取相同的模板。这意味着您可以彻底改变代码:

$.get('js/template.html', function(t) {
  var template = _.template(t); // Just compile it once.
  _.each(here.data_table.models, function(model) {
    $(here.el).find('tbody').append(template({ data: model }));
  });
}, 'html');

我在此过程中重命名了一些变量，以使名称更好地匹配其功能。

另外，如果here是一个 View 实例，那么你可以说:

here.$('tbody').append(...)

或

var template = _.template(t);
var $tbody   = here.$('tbody');
_.each(here.data_table.models, function(model) {
  $tbody.append(...);
});

而不是浪费:

$(here.el).find('tbody').append(...)