複数のテンプレートを使用したバックボーンビューのレンダリング

Question

私はバックボーンでプロジェクトを作成しています.2つのドラッグタイプのカテゴリがあり、クリックするとそれぞれのドラッグタイプに異なるフィールドフォームのdivが表示されます。自分のHTMLに2つの異なるテンプレートを作成しました。しかし私の見解では、ドラッグタイプに基づいてそれらを表現する方法を理解することができません。ここでは、いくつかのコードスニペットです：

Router.js

app = { 

models: {}, 
views: {}, 
collections: {}, 
routers: {}, 
init: function() { 
    directory = new app.views.medicine(directoryData); 

    appRouter = new app.routers.Router(); 
    Backbone.history.start(); 
}} 

app.routers.Router = Backbone.Router.extend({ 

        routes: { 
    'filter/:type': 'urlFilter' 
}, 

urlFilter: function(type) { 
    directory.filterType = type; 
    directory.trigger('change:filterType'); 
}}); 

薬剤model.js

app = app || {}; 
app.models.drug = Backbone.Model.extend({ 
defaults: { 
    'drugId': '', 
    'drugName': '', 
    'drugType': '', 
    'pharmaCompName': '', 
    'compound': '', 
    'drugInteractions': '' 
}, 

initialize: function() { 
    var self = this; 
}}); 

app.collections.medicine = Backbone.Collection.extend({ 

model: app.models.drug, 

comparator: function(drug) { 
    return drug.get('drugName'); 
}}); 

薬剤ビュー

app = app || {}; 

    app.views.drug = Backbone.View.extend({ 
tagName: 'li', 

attributes: function() { 
    return { 
     class: 'drug ' + this.model.get('type') 
    }; 
}, 

events: { 
    'click .list-header': 'showDetails' 
}, 

template1: _.template1($('#TABLET_TEMPLATE').html()), 
template2:_.template2($('#SYRUP_TEMPLATE').html()) 

render: function() { 
    if (this.model.get('drugType') == 'Tablet') { 
      this.$el.html(_.template1(this.model.toJSON())); 
    else if (this.model.get('drugType') == 'Syrup') { 
      this.$el.html(_.template2(this.model.toJSON())); 
    return this; 

    }, 

showDetails: function(e) { 
    $(e.target).toggleClass('active'); 
    $(e.target).siblings('.details').slideToggle('fast'); 
    }}); 


    app.views.medicine = Backbone.View.extend({ 

el: '#wrapper', 

initialize: function(data) { 
    this.collection = new app.collections.medicine(data); 
    this.render(); 
    this.$el.find('#filters').append(this.createFilters()); 
    this.on('change:searchFilter', this.filterBySearch, this); 
    this.on('change:filterType', this.filterByType, this); 
    this.collection.on('reset', this.render, this); 
}, 

events: { 
    'keyup #searchBox': 'searchFilter', 
    'click a.filter': 'setFilter' 
}, 

render: function() { 
    var self = this; 
    $('#listing').empty(); 
    _.each(this.collection.models, function(drug) { 
     self.renderdrug(drug); 
    }, this); 
}, 

renderdrug: function(drug) { 
    var newdrug = new app.views.drug({ 
     model: drug 
    }); 
    $('#listing').append(newdrug.render().el); 
}, 

getTypes: function() { 
    return _.uniq(this.collection.pluck('type')); 
}, 

setListLength: function(l) { 
    $('#count').html(l); 
}, 

createFilters: function() { 
    var filters = '<a class="filter" href="#all">all</a>'; 
    _.each(this.getTypes(), function(item) { 
     filters += '<a class="filter" href="#' + item + '">' + item + '</a>'; 
    }); 
    return filters; 
}, 

searchFilter: function(e) { 
    this.searchFilter = e.target.value; 
    this.trigger('change:searchFilter'); 
}, 

setFilter: function(e) { 
    e.preventDefault(); 
    this.filterType = e.currentTarget.innerHTML; 
    this.trigger('change:filterType'); 
}, 

filterBySearch: function() { 
    this.collection.reset(directoryData, { 
     silent: true 
    }); 
    var filterString = this.searchFilter, 
     filtered = _.filter(this.collection.models, function(item) { 
      return item.get('drugName').toLowerCase().indexOf(filterString.toLowerCase()) !== -1; 
     }); 
    this.setListLength(filtered.length); 
    this.collection.reset(filtered); 
}, 

filterByType: function() { 
    if (this.filterType === 'all') { 
     this.collection.reset(directoryData); 
     this.setListLength(this.collection.length); 
     appRouter.navigate('filter/all'); 
    } else { 
     this.collection.reset(directoryData, { 
      silent: true 
     }); 
     var filterType = this.filterType, 
      filtered = _.filter(this.collection.models, function(item) { 
       return item.get('type') === filterType; 
      }); 
     this.setListLength(filtered.length); 
     this.collection.reset(filtered); 
     appRouter.navigate('filter/' + filterType); 
    } 
}}); 

data.jsonこれら二つの提案の

directoryData = [ 
{ 
    "drugId": 44332, 
    "drugName": "Nimkul Para 100,500mg", 
    "drugType": "Tablet", 
    "pharmaCompName": "Finecure", 
    "compound": "Nimesulide + Paracetamol", 
    "drugInteractions": "", 
    "drugIndications": "", 
    "drugContraIndications": "" 
}, 
{ 
    "drugId": 44331, 
    "drugName": "Nimkul Para 50,125mg/5ml", 
    "drugType": "Syrup", 
    "pharmaCompName": "Finecure", 
    "compound": "Nimesulide + Paracetamol", 
    "drugInteractions": "", 
    "drugIndications": "", 
    "drugContraIndications": "" 
}] 

index.htmlを

<head> 
     <title>App</title> 

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<link href="css/style.css" rel="stylesheet" /> 
    </head> 
    <style> 
    ul#listing li .list-header.active .part2 { 
     display: none; 
} 

    ul#listing li .list-header.active .icon { 
     display: block; 
} 

.icon { 
    display: none; 
} 
     </style> 

     <body> 

<div class="col-xs-12 container-fluid" id="wrapper"> 

    <div class="col-xs-12 parentdiv" style=" "> 
     <div class="col-xs-12 part1"> 
      <div class="col-xs-1 spacer1"></div> 
      <div class="col-xs-10 searchsection"> 
       <div class="col-xs-12 header" style=""> 
        Prescription For Hrittika Bhowmick 

       </div> 
       <div class="col-xs-12 nextsec"> 
     <div class="col-xs-1 spacer2"></div> 
      <div class="col-xs-10 tooldiv"> 
      <div class="col-xs-12 tools"> 
       <form class="navbar-form" role="search" > 
       <div class="col-xs-12 input-groupaddon"> 
       <div class="col-xs-11 searchbar"> 
             <div class="col-xs-12 gh" style="padding-left:0px; padding-right: 0px;"> 
              <input class="form-control" type="text" id="searchBox" placeholder="Search For Latest drugs" name="srch-term" style=" 
width: 100%; 
    height: 52px; 
    border-bottom-left-radius: 22px; 
" /> 
             </div> 
            </div> 
            <div class="col-xs-1 input-group-btn" style=" 
    padding-right: 0px; 
    padding-left: 0px; 
"> 
             <button class="btn btn-default" type="submit" style=" 
        height: 52.3px; 
        border-top-right-radius: 22px; 
"><i class="glyphicon glyphicon-search"></i></button> 
            </div> 
           </div> 
          </form> 
         </div> 
        </div> 
        <div class="col-xs-1 spacer1"></div> 
       </div> 

       <div class="col-xs-12 showdiv"> 
        <div class="col-xs-6 col-md-2 text" style="">We are showing</div> 
        <div class="col-xs-1 mid" style="" id="count">20</div> 
        <div class="col-xs-4 next" style="">results </div> 
       </div> 


      </div> 


      <div class="col-xs-12 section2" style="height: 464px;"> 
       <div class="col-xs-2 spacer2"></div> 
       <div class="col-xs-12 col-md-8 listdiv" style="padding-left: 0px; 
padding-right: 0px; 
border-radius: 10px"> 
        <ul id="listing" style=" 
     background: linear-gradient(to right,rgb(203, 111, 21) , rgb(205, 186, 88)); 
overflow-x: hidden; 
border-radius: 24px; 
overflow-y: scroll; 
    height:411px;" class="list"></ul> 
       </div> 
       <div class="col-xs-2"></div> 
      </div> 
     </div> 
     <script type="text/template" id="TABLET_TEMPLATE"> 


      <div class="col-xs-12 list-header"> 
       <div class="col-xs-6 part1"> 
        <%= drugName %> 
       </div> 

       <div class="col-xs-6 part2" style="text-align: right;"> 
        <%= drugType %> 
       </div> 
       <div class="col-xs-12 icon" style="margin-top: -20px; 
text-align: right;"> 
        <div class="col-xs-10 glyphicon glyphicon-trash" style="text-align: right;"></div> 
        <div class="col-xs-2 glyphicon glyphicon-info-sign" id="add-button" data-toggle="modal" data-target="#myModal" style="text-align: left;"></div> 
        <div class="modal fade" id="myModal" role="dialog"> 
         <div class="modal-dialog"> 

          <!-- Modal content--> 
          <div class="modal-content"> 
           <div class="modal-header"> 
            <button type="button" class="close" data-dismiss="modal">&times;</button> 
            <h4 class="modal-title">Modal Header</h4> 
           </div> 
           <div class="modal-body"> 
            <p>Some text in the modal.</p> 
           </div> 
           <div class="modal-footer"> 
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
           </div> 
          </div> 

         </div> 
        </div> 

       </div> 


      </div> 
      <div class="details" style="border-bottom-left radius: 24px;height: 263px;display:none;background-color: rgba(220, 151, 25, 0.45);border-bottom-right-radius: 24px;padding-left: 0px; padding-right: 0px;"> 

       <form class="form-inline" role="form"> 
        <div class="col-xs-12 leftform" style=" 
     padding-left: 0px; 
     height: 189px; 
    "> 
         <div class="col-xs-12 semidiv"> 
          <div class="col-xs-12 form-inline" style="padding-left:0px;"> 
           <div class="col-xs-9 col-sm-11 div1" style="padding-left: 0px;"> 
            <label for="name" class="labelclass" style="">Tablets (per dosage)</label> 
           </div> 
           <div class="col-xs-3 col-sm-1 div2"> 
            <input type="number" class="form-control" id="name" placeholder="1" style=" 
      color: white; 
      background-color: rgba(128, 128, 128, 0.44); 
      border: 1px solid rgba(0, 0, 255, 0); 
      font-weight: bold; 
       width:100px; 
     "> 
           </div> 
          </div> 



         </div> 
        </div> 


       </form> 
      </div> 



     </script> 
     <script type="text/template" id="SYRUP_TEMPLATE"> 


      <div class="col-xs-12 list-header"> 
       <div class="col-xs-6 part1"> 
        <%= drugName %> 
       </div> 

       <div class="col-xs-6 part2" style="text-align: right;"> 
        <%= drugType %> 
       </div> 
       <div class="col-xs-12 icon" style="margin-top: -20px; 
    text-align: right;"> 
        <div class="col-xs-10 glyphicon glyphicon-trash" style="text-align: right;"></div> 
        <div class="col-xs-2 glyphicon glyphicon-info-sign" id="add-button" data-toggle="modal" data-target="#myModal" style="text-align: left;"></div> 
        <div class="modal fade" id="myModal" role="dialog"> 
         <div class="modal-dialog"> 

          <!-- Modal content--> 
          <div class="modal-content"> 
           <div class="modal-header"> 
            <button type="button" class="close" data-dismiss="modal">&times;</button> 
            <h4 class="modal-title">Modal Header</h4> 
           </div> 
           <div class="modal-body"> 
            <p>Some text in the modal.</p> 
           </div> 
           <div class="modal-footer"> 
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
           </div> 
          </div> 

         </div> 
        </div> 

       </div> 


      </div> 

      <div class="details" style=" border-bottom-left-radius: 24px; 
    height: 263px; 
display:none; 
    background-color: rgba(220, 151, 25, 0.45); 
    border-bottom-right-radius: 24px;padding-left: 0px; padding-right: 0px;"> 

       <form class="form-inline" role="form"> 
        <div class="col-xs-12 leftform" style=" 
       padding-left: 0px; 
       height: 189px; 
    "> 
         <div class="col-xs-12 semidiv"> 
          <div class="col-xs-12 form-inline" style="padding-left:0px;"> 
           <div class="col-xs-9 col-sm-11 div1" style="padding-left: 0px;"> 
            <label for="name" class="labelclass" style="">Tablets (per dosage)</label> 
           </div> 
           <div class="col-xs-3 col-sm-1 div2"> 
            <input type="number" class="form-control" id="name" placeholder="1" style=" 
       color: white; 
       background-color: rgba(128, 128, 128, 0.44); 
       border: 1px solid rgba(0, 0, 255, 0); 
       font-weight: bold; 
       width:100px; 
     "> 
           </div> 
          </div> 


         </div> 
        </div> 

        <a href="#" <div="" class="col-xs-12 footer" style=" 
     padding-left: 0px; 
     height: 53px; 
     background-color: #33D281; 
     border-bottom-left-radius: 18px; 
     padding-right: 0px; 
     text-align: center; 
     font-size: 26px; 
     border-bottom-right-radius: 21px; 
"> 
    Create Prescription 

</a> 
       </form> 
      </div> 



     </script> 




     <script src="js/libs/jquery-1.10.2.min.js" type="text/javascript"></script> 
     <script src="js/libs/underscore-min.js" type="text/javascript"></script> 
     <script src="js/libs/backbone-min.js" type="text/javascript"></script> 
     <script src="js/libs/curl.js" type="text/javascript"></script> 
     <script src="js/libs/lodash.js" type="text/javascript"></script> 
     <script src="js/routers/router.js" type="text/javascript"></script> 
     <script src="js/models/drug-model.js" type="text/javascript"></script> 
     <script src="js/views/drug-views.js" type="text/javascript"></script> 
     <script src="js/data.json" type="text/javascript"></script> 
     <script src="js/app.js" type="text/javascript"></script> 

    </div> 

Answer 1

一つが役立つはずです。これらは、タイプを切り替えるときにrender()を思い出すと仮定：render()でdrugTypeに基づいて

1. はスイッチ：

   render: function() { 
       if (this.model.get('drugType') == 'Tablet') { 
        this.$el.html(_.template(TABLET_TEMPLATE)); 
       else if (this.model.get('drugType') == 'Syrup') { 
        this.$el.html(_.template(SYRUP_TEMPLATE)); 
       return this; 
   }, 
   

2. あなたがそれに渡すモデルからdrugTypeに従って動作し、単一のテンプレートを使用します。

   <% if (drugType == 'Tablet') { %> 
   <!-- Render things here --> 
   <% } else if (drugType == 'Syrup') { %> 
   <!-- Render other things --> 
   <% } %>