複数のbackbone.js同じunderscore.jsテンプレート内の情報を表示しない

Question

私はsearchView.jsというバックボーンビューファイルを持っていますが、search.templates.htmlというUnderscore.jsテンプレートもあります。 searchView.jsでは、searchView.jsのさまざまなモデルから複数の情報を取得しています。たとえば：バナー、検索、検索なし。同じUnderscore.jsファイルに複数の情報を表示したいのですが、アンダースコアテンプレートの問題に直面しています。私はテンプレートページを実行しようとしています、tamplateはバナー情報を表示するだけで、検索情報は表示されません。私はこの技術で新しいです。

/searchView.js

var SearchView = BaseView.extend({ 
    events: { 
    "click .serviceDetails": "openServiceDetail" 
    }, 
    constructor: function SearchView() { 
    var self = this; 
    self.bannerModel = new bannerModel({}); 
    self.listenTo(Backbone.Events, 'search.controller:render', self.fetchData); 
    self.listenTo(Backbone.Events, 'banner:loaded', self.renderBanner); 
    BaseView.prototype.constructor.apply(this, arguments); 
    }, 
    renderBanner: function() { 
    var self = this; 
    var details = self.bannerModel.get('serviceDetails'); 
    console.log(details); 
    var formattedData = { 
     name: details[0].VendorAttributeValue, 
     overview: details[1].VendorAttributeValue, 
     priceAdult: details[2].VendorAttributeValue, 
     priceChild: details[3].VendorAttributeValue, 
     image: details[4].VendorAttributeValue 
    }; 
    console.log(instaConfig, formattedData); 
    self.$el.html(_.template(SearchTpl)({ 
     instaConfig: instaConfig, 
     details: formattedData 
    })) 
    }, 
    initialize: function SearchView() { 
    var self = this; 
    self.searchModel = new searchModel(); 
    self.searchModel.params = {}; 

    if (window.q) { 
     self.searchModel.setParam('q', window.q); 
     self.searchModel.fetch(); 
     self.listenTo(this.searchModel, 'sync', self.renderSearchParam); 
     delete window.q; 
    } else { 
     self.searchModel.get('searchDetails'); 
     self.searchModel.fetch(); 
     self.listenTo(this.searchModel, 'sync', self.renderWithoutSearch); 
    } 
    }, 
    renderSearchParam: function() { 
    var self = this; 
    var dataSearchParam = self.searchModel.get('searchDetails'); 
    console.log(dataSearchParam); 
    var formattedSearchData = { 
     name: dataSearchParam[3].serviceShortName, 
     price: dataSearchParam[3].ListPrice, 
     image: dataSearchParam[3].imageUrl[0] 
    } 
    console.log(formattedSearchData); 
    self.$el.html(_.template(SearchTpl)({ 
     details: formattedSearchData 
    })) 
    }, 
    renderWithoutSearch: function() { 
    var self = this; 
    var data = self.searchModel.get('searchDetails'); 
    console.log(data); 
    var formattedWithoutSearchData = { 
     name: data[0].serviceShortName, 
     price: data[0].ListPrice, 
     image: data[0].imageUrl 
    }; 
    console.log(formattedWithoutSearchData); 
    self.$el.html(_.template(SearchTpl)({ 
     data: formattedWithoutSearchData 
    })) 
    }, 
    openServiceDetail: function(event) { 
    event.preventDefault(); 
    Backbone.history.navigate('/1/1/nextStage', { 
     "trigger": true, 
     replace: false 
    }); 
    Backbone.history.loadUrl(Backbone.history.fragment); 
    } 
}) 

<div class="guest-home-main"> 
    <header id="book-head" class="serviceDetails" style="background-image: url(<%=instaConfig.vimgurlService%><%=details.image%>)"> 
    <div class="container" id="banner-view"> 
     <div class="row"> 
     <div class="col-md-12 text-center main-text"> 
      <h1><font color="green">Tour Name: <%=details.name%></font></h1> 
      <p><font color="green">Description: <%=details.overview%></font> 
      </p> 
      <h5><font color="green">Adult Price: INR <%=details.priceAdult%></font></h5> 
      <a href="" type="button" class="btn btn-default">Book Now</a> 
     </div> 
     </div> 
    </div> 
    </header> 
    <!-- End Of Banner Information --> 


    <!-- search Information --> 


    <section id="recom"> 
    <div class="container"> 
     <div class="row"> 
     <div class="col-md-12 tour-head"> 
      <div class="col-md-4 tour_1"> 
      <div class="tour-box "> 
       <a href=""> 
       <img src="modules/core/assets/dummy/tour-2.jpg" class="img-responsive"> 
       </a> 
       <div class="disc"> 
       <div class="sale">Our Best Seller</div> 
       </div> 
       <div class="tour-det"> 
       <h5><%=dataSearchParam.name%></h5> 
       <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates.</p> 
       </div> 

       <div class="dropdown"> 
       <div class="price" data-toggle="dropdown"> 
        <i class="fa fa-inr" aria-hidden="true"></i> 
        <%=dataSearchParam.price%><span class="caret"></span> 
       </div> 
       <!-- End Of Search --> 


       <!-- without Search Information --> 


       <div class="col-md-4 tour_1"> 
        <div class="tour-box"> 
        <a href=""> 
         <img src="modules/core/assets/dummy/tour-6.jpg" class="img-responsive"> 
        </a> 
        <div class="tour-det"> 
         <h5><%=data.name%></h5> 
         <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates.</p> 
        </div> 
        <div class="dropdown"> 
         <div class="price" data-toggle="dropdown"> 
         <i class="fa fa-inr" aria-hidden="true"></i> 
         <%=data.price%> <span class="caret"></span> 
         </div> 
         <ul class="dropdown-menu price-menu"> 
         <li><a href="#"><i class="fa fa-inr" aria-hidden="true"></i><%=data.price%></a> 
         </li> 
         </ul> 
        </div> 


        <div class="book-head"> 
         <div class="b-now serviceDetails">Book Now</div> 
         <div class="add-to"> 
         <a href=""> 
          <img src="modules/core/assets/dummy/addto.png" class="img-responsive"> 
         </a> 
         <p>Add to my Tours</p> 
         </div> 
        </div> 
        </div> 
       </div> 
       <!-- End Without Search --> 

Answer 1

一つの可能​​な解決策は、すべてのモデル（バナー、検索せずに検索&）を使用してフェッチされるのを待つことです/search.templates.html $。jqueryメソッドを使用して、すべてのモデルのデータを統合してテンプレートに送信します。

$.when(bannerModel.fetch(), searchModel.fetch()).done(function(model1, model2) { 
    /* consolidate all models data */ 

    self.$el.html(_.template(SearchTpl)({ 
    bannerData: model1[0], 
    searchData: model2[0] 
    })) 
});