在 ember-js 中加载微调器

Question

我试图在 Ajax 调用期间在 emberJS 中显示加载微调器。我的代码是给定的 below.I 在控制器操作中给出了 ajax 调用。问题是 gif 图像在 ajax call.I 也尝试了 ajaxStart 和 ajaxStop 但没有得到预期结果之后显示和隐藏。

$.ajax({
        beforeSend:function(){
            $('#wait').show();
          console.log("started t");
        },
          type:"POST",
          url:"/getdata",
          async:false,
          data:"some",
          complete:function(){
                  $('#wait').hide();
                 }
  });

<div id="wait" style="height: 500px;width: 1200px;display:none">
  <img src="assets/images/pageloader.gif" alt="Loading....">
</div>

任何人都可以建议我在 loading.Thank 上显示图像的方式，以便提前回答。

Answer 1

如果您出于某种原因确实需要使用同步 ajax 调用，只需

$('#wait').show();
$.ajax();
$('#wait').hide();

会起作用。

但是，

不推荐同步ajax调用
UI 也不推荐从 route/controller 进行操作。

因此，折衷的解决方案是使用控制器属性 'show_loading' 来维持 ui 状态，根据需要设置 true 或 false 并在模板中使用 if 来显示加载器。

理想的解决方案是使用 promise in the model - either as async ajax or ember-data and using the loading substates 来显示加载器。

在 ember-js 中加载微调器

Loading spinner in ember-js

jquery

ember.js

ember-cli