Backbone渲染外部模板而不使用$ .get

时间:2014-07-06 22:15:23

标签: javascript jquery backbone.js asynchronous

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

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

我有一个文件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

如果我在我的$ .get函数中放入一个console.log,我可以得到这个:

3
2
4
1

另一个命令不是原始因为异步。

有人可以帮助我吗?

由于

1 个答案:

答案 0 :(得分: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(...)