Show/hide div - 干

Question

我有 3 个视图，SectionAView、SectionBView 和 SectionCView。每个视图都有 2 个单选按钮，Yes 和 No。

当我在SectionAView中selectYes时，应该显示SectionBView。选择“否”应显示 SectionCView（并隐藏 SectionBView）

该应用程序可能有很多视图，所以我想我的问题是让事情变得更干一点，这可能是解决这个问题的最佳方法？

我有这样的东西：

var Section = Backbone.Model.extend({
    defaults: {
        block: null
    }
});

var List = Backbone.Collection.extend({
    model: Section
});

var SectionAView = Backbone.View.extend({
    el: 'body',

    initialize: function() {
        this.model = new Section();
        this.collection = new List();
        this.listenTo(this.model, "change", this.render);
        this.render();
    },
    events: {
         'click .section-a': 'updateElement'
    },
    render: function(e) {
         this.$el.find('.section-b').hide();
         return this;
    },
    updateElement: function(e) {
        var $target = $(e.target);
        var activeValue = $target.val();
        // Default - SectionA is displayed (at all times)
       this.model.set('block', 'section-a');
       this.collection.push(this.model);
       if (activeValue == 'no') {
           this.$el.find('.section-b').show();
           this.$el.find('.section-c').hide();
       } else {
           this.$el.find('.section-c').show();
           this.$el.find('.section-b').hide();
       }
     }
   });

   var SectionBView = Backbone.View.extend({
        el: 'body',
        model: Section,

        initialize: function() {
             this.render();
        },
        render: function(e) {
            this.$el.find('.section-b').hide();
            return this;
        },
      });

      var SectionCView = Backbone.View.extend({
            el: 'body',
            initialize: function() {
                this.render();
            },
            render: function(e) {
                this.$el.find('.section-c').hide();
                return this;
            }

        });

HTML:

    <div class="section-a" data-active-value="true">
        <h2>Section A</h2>
        <label>Yes<input type="radio" name="section-a" class="section-a" value="yes" /></label>
        <label>No<input type="radio" name="section-a" class="section-a" value="no" /></label>
    </div>

    <div class="section-b" data-active-value="">
        <h2>Section B</h2>
        <label>Yes<input type="radio" name="section-b" class="section-b" value="yes" /></label>
        <label>No<input type="radio" name="section-b" class="section-b" value="no" /></label>
    </div>

    <div class="section-c">
        <h2>Section C</h2>
        <label>Yes<input type="radio" name="section-c" class="section" value="yes" /></label>
        <label>No<input type="radio" name="section-c" class="section" value="no" /></label>
    </div>

Answer 1

最好缓存元素并使用toggleClass:

render: function(e) {
    //cache        
    var elemB = this.$el.find('.section-b')
    var elemC = this.$el.find('.section-c')
    elemB.toggleClass('show', false);//remove 'show' class if any
         return this;
    },
updateElement: function(e) {
    var $target = $(e.target);
    var activeValue = $target.val();
    // Default - SectionA is displayed (at all times)
    this.model.set('block', 'section-a');
    this.collection.push(this.model);
    elemB.toggleClass('show', (activeValue === 'no'));
    elemC.toggleClass('show', (activeValue === 'yes'))
    }

此外，如果您将 activeValue 设置为 true 或 false，您将不必检查 'no' 值并且代码会变得更短

elemB.toggleClass('show', activeValue);

Show/hide div - 干

Show/hide div - DRY

javascript

backbone.js