在骨干.js項目的underscore.js中將回調函數與循環一起使用

Question

我開發backbone.js與項目underscore.js和require.js 。

我創建了一個JavaScript回調函數，以便使用ajax從Web服務獲取數據：

this.getProCallBack = function(type,callback){
var result = "";
  $.ajax({
    url: url, //rest url
    type:"GET", 
    dataType:"json",
    contentType: "application/json",
    success: function(response){
        result = callback(response);
    }
  });
}

這是ost骨.js的視圖

 define(["jquery" ,
   "underscore" ,
   "backbone",
   "text!templates/Layout/ba.html",
   "promo"
 ],function($, _, Backbone, BannerTem, Promo){
    var BaView = Backbone.View.extend({
        initialize : function(){
        },
        render: function(options){
           var _banner = _.template(BannerTem);
           $(this.el).html(_banner({type : this.options.type}));
           return this;
       }
     });
     return BannerView;
 });

我正在使用text.js of來調用帶有HTML文件的下划線模板。

這是模板： ba.html

<div id="ei-slider" class="ei-slider">
 <ul class="ei-slider-large">
    <%
        var home = new Promo();
        home.getProCallBack(type,function(result){
        _.each(result, function(slideimg){
            switch(slideimg.ItemCount){
                case 0 :
                alert(slideimg.PromotionImage);
    %>
    <li>
        <a href="#detail/<%=slideimg.ItemList[0].UID%>">
            <img src="slideimg.PromotionImage%>" />
        </a>
    </li>
    <%
            break;
            default:
    %>
    <li>
        <a href="#detail" style="float: left;">
            <img src="slideimg.PromotionImage%>" />
        </a>
    </li>
    <%
        }
    %>
 </ul>
</div>

問題 ： alert()在case塊中有效，但<img>在DOM未顯示。

我不確定這是因為_.each()在callback函數中不起作用或可能導致此問題的原因。

不知道是什么原因造成的。 謝謝。

Answer 1

您的方法有些落后。 由於時序問題，AJAX調用在模板內無法正常工作。

您應該將邏輯倒轉過來，這樣就可以在視圖中使用AJAX調用，並且可以處理$.ajax成功回調中的模板。 您認為這樣的事情：

render: function(options){
    var _banner = _.template(BannerTem);
    var home    = new Promo();
    home.getProCallBack(this.options.type, function(result) {
        this.$el.html(_banner({result result}));
    }.bind(this));
    return this;
}

然后模板將更像這樣：

<div id="ei-slider" class="ei-slider">
    <ul class="ei-slider-large">
        <% _.each(result, function(slideimg) {
            if(slideimg.ItemCount == 0) { %>
                <li>
                    <a href="#detail/<%=slideimg.ItemList[0].UID%>">
                        <img src="<%= slideimg.PromotionImage%>" />
                    </a>
                </li>
            <% } else { %>
                <li>
                    <a href="#detail" style="float: left;">
                        <img src="<%= slideimg.PromotionImage%>" />
                    </a>
                </li>
            <% }
        }) %>
    </ul>
</div>

一路上我將switch為if/else ， 很難在Underscore模板中正確地進行switch ，因此我不會打擾。