javascript - 仅在ajax完成后加载部分html View - 同步

Question

在使用 ajax 从 templateHelper 获取结果后，我需要加载部分 html 模板。

在我的ItemView代码中:

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

可以功能:

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，我的结果是未定义的，并且在控制台上“不能”，尽管它是真的。 如何仅在 ajax 完成后才在 if 语句中加载我的代码？

Answer 1

不要尝试以“同步方式”使用异步代码。

也许，这对您来说是一个很好的解决方案:

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

• 这里我们从函数返回 Promise，因为我们想要对异步操作完成使用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。