Использование функции обратного вызова с контуром в underscore.js проекта backbone.js не работает

Question

Я разрабатываю проект backbone.js с underscore.js и require.js.

Я создал яваскрипта функцию обратного вызова для получения данных из веб-службы с помощью ajax:

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

Вот Посмотреть из Backbone.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 из для вызова шаблона подчеркивания с помощью 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 по слову, switch is difficult to get right in an Underscore template поэтому я стараюсь не беспокоить ,