堆栈内存溢出
  繁体   English   中英

骨干视图通过多个模板呈现

[英]Backbone view rendering through multiple templates

 原文  2016-09-02 17:22:06  9   1    javascript/ jquery/ backbone.js/ backbone-events

问题描述

所以我在骨干上创建了一个项目，我有两种药物类型，每种药物类型在点击时显示不同字段形式的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>

1 个解决方案

解决方案1
 0  2016-09-02 18:49:09

这两个建议中的一个应该有所帮助。 假设您在类型之间切换时调用render() ：

  1. 在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; },

  2. 使用单个模板，该模板根据您传递给它的模型中的drugType行为： 

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 呈现骨干视图之前有多个XHR请求 带骨干视图的下划线模板 使用骨干网和Express渲染模板 如何在单个主干视图中使用多个JST模板 Yeoman主干视图未呈现 骨架视图刷新 骨干主体视图未渲染 骨干集合视图渲染 在Parse JS API（backbone.js）视图模板中不仅渲染模型属性 带下划线模板的bone.js渲染
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM