2016-10-21 9 views
0

一部のコンテンツを表示するトグル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の適切な動作を見ていないことです。それはトグルではなく、むしろ一度現れ、何も起こらない。

誰でも私にこれを手伝ってもらえますか?代わりに初期の、真:

+0

トライshowmeStateなければならない関数(){ this.showmeState = TRUE。 }、 – Mahi

+0

@Mahi - まだ動作していません – Sourav

+0

お金を伸ばそうとしましたあなたの子ビューでbaseViewを表示しません –

答えて

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

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

さらに短く: 'this。$( '.toggle-div-content')' –

関連する問題