javascript - ajax完成同步后,只加载部分html视图

  显示原文与译文双语对照的内容

我需要加载部分html模板,在得到使用ajax的templateHelper的结果之后。

在我的ItemView 代码中:


templateHelpers: {
 currentUserCan: function(action) {
 $.when( currentUser.can(action) ).done(function(permission){
 return permission;
 });
 }
}

can 函数:


can: function( action ){

 var defer = $.Deferred(),
 params = {.. .. }

 $.get( config[ 'api' ], params)
. done(function(response) {
 defer.resolve(response['permission'])
 })
. fail(function(response){
 defer.resolve(false) 
 });

 return defer.promise();
}

我的模板:


<div class="large-8 columns">
 <p><% if (currentUserCan('some_action')) { do something, console.log("can") } else { console.log('can not')}%></p>
 <p>Last Status:<%= date %></p>
</div>

<div class="large-8 columns">
...
...

由于异步 ajax,我得到了未定义的结果,并且'不能'在控制台上,尽管它得到了 true 。 如何在 if 语句中加载我的代码,只有在ajax完成之后?

时间: 作者:

不要尝试在"同步方式"中使用异步代码。

也许,这对你来说是一个好的解决方案:


templateHelpers: {
 currentUserCan: function(action) { return currentUser.can(action); }
}

  • 这里我们从函数中返回承诺,因为我们希望对异步操作完成做出React。

<div class="large-8 columns"> <p><% $.when(currentUserCan('some_action')).done(function(permission) { if(permission) console.log("can"); else console.log('can not'); }) %></p> <p>Last Status:<%= date %></p> </div>

  • 这里我们从模板中使用 promise 。
...