다중 템플릿을 통한 백본보기 렌더링

백본에서 프로젝트를 만들고 두 개의 drugtype 범주가 있고 각각의 drugtype은 클릭 할 때 서로 다른 필드 형식을 가진 div를 표시합니다. 내 HTML에 두 개의 다른 템플릿을 만들었습니다. 그러나 내 견해에있어 약물 유형에 기초하여 그것을 렌더링하는 방법을 알아낼 수 없습니다. 여기에 몇 가지 코드 조각은 다음과 같습니다다중 템플릿을 통한 백본보기 렌더링

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>

출처

2016-09-02 Hrittika

당신이 경우 그것은 좋은 것입니다 jsFiddle을 사용하여 최소한의 예제를 제공 할 수 있습니다. –

하나. render()에 drugType에 따라

스위치 :

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

당신이 그것으로 통과 모델에서 drugType에 따라 동작하는 하나의 템플릿을 사용하여 이러한 유형의 사이를 전환 할 때 render()을 불러 가정 :
```
<% if (drugType == 'Tablet') { %> 
 
<% } else if (drugType == 'Syrup') { %> 
 
<% } %> 
```

출처

2016-09-02 18:49:09

drugType 속성을 기반으로 스위치를 시도했지만 결과가 표시되지 않습니다. 두 개의 템플릿을 만들어 내 '마약'보기에 렌더링 메서드를 넣으려고 했어! – Hrittika

시도한 내용으로 질문을 업데이트 할 수 있습니까? –

선생님, 편집하고 index.html 파일을 업로드했습니다 ... 어디서 잘못되었는지 알아낼 수 있습니다. – Hrittika

다중 템플릿을 통한 백본보기 렌더링

답변

관련 문제