没有 $.get 的主干渲染外部模板答案

【问题标题】：Backbone render external template without $.get没有 $.get 的主干渲染外部模板
【发布时间】：2014-07-07 09:34:04
【问题描述】：

我的应用有一个小错误。

是我加载外部模板时的渲染问题。

我的主干应用程序有一个文件 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 简化：

如果我在我的 $.get 函数中放置一个 console.log，我可以得到这个：

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

有人可以帮我吗？

谢谢

【问题讨论】：

我通常做的是将这些类型的调用放在我的路由器中，然后再交给视图。只是查看应该真正地™（作为“最佳实践”），除了渲染本身之外并没有真正做太多事情。所以我会在实例化它之前把它需要的所有数据交给它..

标签： javascript jquery backbone.js asynchronous

【解决方案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 是一个视图实例，那么你可以说：

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(...)

【讨论】：