Javascript 通过多个模板进行主干视图渲染

所以我在主干上创建了一个项目，我有两个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');
}});

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');
}});

药物模型.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');
}});

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

index.html

应用程序
ul#listing li.list-header.active.part2{
显示：无；
}
ul#列出li.list-header.active.icon{
显示：块；
}
.图标{
显示：无；
}
Hritika Bhowmick的处方
我们正在展示
20
结果

&时代；
模态头
模态中的一些文本

接近
片剂（每剂量）
&时代；
模态头
模态中的一些文本

接近
片剂（每剂量）

---

这两个建议中的一个应该会有所帮助。在类型之间切换时，假设您回忆起

render（）

：

基于

render（）

中的

drugType

进行切换：

使用一个模板，该模板根据您传递给它的模型中的

drugType

进行操作：

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

---

这两个建议中的一个应该会有所帮助。在类型之间切换时，假设您回忆起

render（）

：

基于

render（）

中的

drugType

进行切换：

使用一个模板，该模板根据您传递给它的模型中的

drugType

进行操作：

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

---

如果您可以使用jsfiddle提供一个最低限度的示例，那就太好了。如果您可以使用jsfiddle提供一个最低限度的示例，那就太好了。我尝试了基于drugType属性的开关，但它没有显示任何结果。我尝试通过创建两个模板将该渲染方法放到我的“drug”视图中！您能用您尝试过的内容更新问题吗？先生，我已经编辑并上传了index.html文件…这样您就可以知道我哪里出错了。我尝试了基于drugType属性的开关，但它没有显示任何结果。我尝试通过创建两个模板将该渲染方法放到我的“drug”视图中！先生，我已经编辑并上传了index.html文件…这样你就可以知道我哪里出错了