骨干獲取之前的.css（）樣式不起作用-jQuery

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上發現了一個與即時通訊面臨的問題非常相似的問題：

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();
    });
},

在骨干網中， 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()函數，否則模板可能無法成功渲染！ 如果您需要在渲染后添加功能，建議您使用名為Marionette的Backbone插件，該插件提供了許多回調函數，例如onRender ，請參見： http : //marionettejs.com/