Question

我试图在点击链接时显示加载图标，以便用户知道该应用正在加载。我以这种方式应用它：

var list = new List();
$("#link").on("click",function(){
   $("#cont").css("opacity", 0.4); // to grey out the background area
   $("#loading").css({"display": "block"});
   list.fetch({
       //do something here
    });
 }

小提琴：http://jsfiddle.net/dfvxg5qz/1/

但是，页面不会显示加载图标，也不会根据不透明度样式显示灰色。我调试了以查看问题所在，我发现只有当我尝试获取某些内容时才会应用.css（）属性，否则如果我只是渲染页面或执行主干保存，则会应用.css属性和鞋子加载图标。我不确定是什么时候发生的，或者如果有任何其他方式我可以在获取发生之前显示点击加载标志。我在stackoverflow上发现了一个与我面临的问题非常类似的问题：

Backbone Model fetch steps on loading indicator in Chrome & IE

但看起来并没有解决，所以仍然坚持...... 任何想法如何实现这一点？感谢〜

Answer 1

在你的小提琴中我看到了：

render: function(){
    $("#link").on("click",function(){
        $("#cont").css("opacity", 0.4); // to grey out the background area
        $("#loading").css({"display": "block"});
        getdata();
    });
},

在Backbone中，render()函数通常在从服务器获取数据后执行，因此我建议您在on函数中使用initailize方法，只需尝试以下操作：

initialize: function(){  
        this.template = lisTmpl;
        $("#link").on("click",function(){
        $("#cont").css("opacity", 0.4); // to grey out the background area
        $("#loading").css({"display": "block"});
        getdata();
    });
},

此外，您不应该重写render()函数，否则模板可能无法成功！如果你需要在渲染后添加函数，我建议使用Backbone名为Marionette的插件，它提供了许多回调函数，例如onRender，只需看到： http://marionettejs.com/

主干提取之前的.css（）样式不起作用-Jquery

1 个答案: