同一个underscore.js 模板中的多个backbone.js 查看信息不起作用

Question

我有一个名为 searchView.js 的 Backbone 视图文件，我还有一个名为 search.templates.html 的 Underscore.js 模板。 在 searchView.js 中，我从 searchView.js 中的不同模型中获取多个信息，例如：横幅、搜索和没有搜索。我想在同一个 Underscore.js 文件中显示多个信息，但我在 Underscore 模板中遇到了问题，无论何时我正在尝试运行模板页面，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);
  }
})

/search.templates.html

<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

一种可能的解决方案是等待使用 $.when 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]
  }))
});