使用Backbone.js切换div部分

我想构建一个切换div来显示一些内容。我的代码如下：使用Backbone.js切换div部分

父视图

/*global define:true */ 
define([ 
    "jquery", 
    "backbone", 
    "bootstrap", 
    "BaseView", 
    "view/money/inc/toggleHoldSection" 
], 
    function ($, Backbone, Bootstrap, BaseView, ToggleHoldSection) { 

     "use strict"; 
     var moneyView = BaseView.extend({ 
      el: "#moneyPage", 
      template: "/public/templates/index.dust" 

      events: { 
       'click #click-to-toggle': 'toggleHoldSection' 
      }, 

      initialize: function() { 
       this.showmeState = true; 
      }, 



      toggleHoldSection: function (evt) { 
       evt.preventDefault(); 

       console.log('this.showmeState', this.showmeState); 
       var view = new ToggleHoldSection(); 
       if (view && this.showmeState === false) { 
        console.log("in if condition"); 
        this.$el.find('toggle-div-content').show(); 
        this.showmeState = true; 
        view.render(); 
       } 
       else{ 
        console.log("in else part", this.showmeState); 
        if (view && this.showmeState === true) { 
         console.log("in else if"); 
         this.$el.find('toggle-div-content').hide(); 
         this.showmeState = false; 
         view.render(); 
        } 
       } 
      } 


     }); 

     return moneyView; 
    });

子视图

define([ 
    'jquery', 
    'backbone', 
    'BaseView', 
    ], 
    function ($, BackBone, BaseView){ 
     'use strict'; 

     return BaseView.extend({ 
      el:'#click-to-toggle', 

      template:'money/inc/messages', 

      initialize: function() { 

      }, 

      beforeRender: function() { 

      }, 

     }) 

})

灰尘页

<div id="click-to-toggle" class="modal-inner-box mobile-specific-holdsection" > 
    <span class="icon icon-arrow-up-small modal-caret-up"></span> 
    <div class="toggle-div-content"> 
     <p>hidden section mobile specific</p> 
    </div> 
</div>

的以上问题是我没有看到div的适当行为;它不会切换，而是显示一次，然后没有任何反应。

任何人都可以帮助我吗？

来源

2016-10-21 Sourav

试showmeState：真，而不是初始化：功能（）{ this.showmeState = TRUE; }， – Mahi

@Mahi - 它仍然不起作用 – Sourav

尝试在您的子视图中扩展moneyView而不是baseView –

this.$el.find('toggle-div-content')...

应该是

this.$el.find('.toggle-div-content')...

来源

2016-10-21 15:04:42 foobored

更短：'this。$（'。toggle-div-content'）' –

使用Backbone.js切换div部分

回答

相关问题