我仍然在试图理解deferred
以及什么不是,所以考虑到这一点,我有一个关于如何做以下事情的问题。
我的团队和我有3个独立的.load()
方法,每个方法都获取一个特定的模板,并将其附加到相同的容器中。每次加载所需的时间可能与您想象的不同,因此当内容加载时,它会以“阶梯式”方式加载(1,然后2,然后3)。我想使用deferred
objects并等待它们全部完成,然后同时添加它们以删除“stair step”操作。
$('<div>').load(baseInfoTemplate, function () {
var baseData = {
// build some object
};
$.tmpl(this, baseData).appendTo($generalContainer);
});
这三个调用都类似于上面的调用。
我如何才能做到这一点?
发布于 2013-09-06 18:21:25
在这种情况下,我使用下一段代码:
$.when(
$.get('templates/navbar.tmpl.html', function(data) {
$('#navbar').html(data);
}),
$.get('templates/footer.tmpl.html', function(data) {
$('#footer').html(data);
}),
$.Deferred(function(deferred) {
$(deferred.resolve);
})
).done(function() {
$.getScript("js/tools/jquery.min.js");
});
在我看来,它看起来比以前的实现更有结构,也更好。
发布于 2014-07-22 18:35:44
我使用以下代码作为泛型库
var loader = {};
(function(){
var fn = {
promises: [],
templates: [],
loadTemplate: function( name ) {
fn.promises.push(
$.get( `templates/${name}.tmpl.html`,
(html) => fn.templates.push( html )
)
);
},
main: function( templates, callback ) {
templates.forEach( (template) => fn.loadTemplate( template ));
$.when.apply( $, fn.promises ).done( function() {
$( '<div id="templates">' ).html( fn.templates.join() ).appendTo( 'body' );
callback();
});
}
};
/* EXPORTS */
loader.main = fn.main;
})();
然后调用它作为应用程序的主js文件中的第一个函数。
function myMain() {
... // do all the things
}
$( document ).ready( function() {
templates = [ 'thingies', 'wotsits', 'oojamaflips' ];
loader.main( templates, () => myMain());
});
https://stackoverflow.com/questions/6507181
复制相似问题