백본에서 버튼 클릭시 div 표시/숨기기

Question

이것은 매우 간단 할 수 있습니다.하지만 백본과 jquery를 배우는 동안이 문제를 파악하는 데 어려움을 겪고 있습니다.

페이지가 처음로드 될 때 하나의 div 만 표시하고 예/아니요 버튼을 클릭하면 다른 div가 표시되기를 원합니다. 또한이 내가 백본보기 위해 가지고 무엇 UI

트위터 부트 스트랩을 사용하고 있습니다 : 당신이 볼 수 있듯이

App.Views.Question = Backbone.View.extend({ 
    tagName: 'div', 

    className: 'question-box hide', 

    template: template('questionTemplate'), 

    events: { 

    }, 

    initialize: function() { 
     this.model.on('reset', this.render, this); 
    }, 

    render: function() { 
     var editQuestionnaire = this.model.toJSON(); 
     console.log(this.$el.html(editQuestionnaire)); 
     this.$el.html(this.template(editQuestionnaire)); 
     //console.log(this.model); 
     return this; 
    } 
}); 

, 나는 클래스 명에 대한 '질문 상자 숨기기'를 설정,하지만 모두 숨 깁니다 divs.

은 여기 내 Index.html을

<div class="bs-docs-example bs-docs-question"> 
     <span class="badge badge-success"><%= question_id %></span> 
     <div class="span3 question-div"> 
      <h4 class="text-info"> 
       <%= question %> 
      </h4> 
      <div class="hs<%= question_id %>"></div> 
      <script type="text/javascript"> 
       var id = <%= question_id %>; 
       var yes_id = <%= yes_question_id %>; 
       var no_id = <%= no_question_id %>; 

       if(id == 1) 
       { 
        $('div .question-box').attr('class', 'question-box show'); 
       } 
       if(id != 8 && id != 9 && id != 6) 
       { 
        $('.hs<%= question_id %>') 
         .append('<button type="button" class="btn btn-primary">Yes </button>') 
         .append('<button type="button" class="btn btn-warning">No</button>'); 
       }   

       else if(id == 6) 
       { 
        $('.hs<%= question_id %>') 
         .append('<button type="button" class="btn btn-primary">OK </button>') 
         .append('<button type="button" class="btn btn-warning">Cancel</button>'); 
       }   

      </script> 

      <span class="span5"></span> 


     <div class="span4"></div> 
     </div> 

이 프로젝트는 일종의 조건 분기 사이트입니다입니다. 따라서 첫 번째 상자는 항상 나타나야합니다. 그런 다음 질문에 따라 다른 상자가 나타납니다. (나는 이것을하는 법을 알고 있다고 생각한다. 나는 question_id를 인자로 취하고 상자를 표시하는 함수를 만들 수 있다고 생각한다. 버튼에 onclick 옵션을 붙일 수있다. 아직 시도하지는 않았다.) 도와 주셔서 정말 고맙습니다.

감사합니다.

Answer 1

나는 HTML 파일 내부에서 js 코드를 실제로 피할 수 있다고 생각한다.보기 내부에서 그것을하려고하면 백본을 사용하는 것이 더 합리적이다.

정확히 무슨 뜻인지 이해할 수 없었습니다. 하지만 당신을 도울 수있는 몇 가지 요령이 있습니다. 버튼을 클릭 할 때 요소를 표시하려면 다음과 같이 할 수 있습니다.

//Inside your view 
events: 
    "click #buton":"showElement" 

showElement:-> 
    @$("#div").addClass("someClassToShowTheDiv") 

아마 코드에서 문제가 여기에있을 수 있습니다 $ ('사업부의 .question 박스') ATTR ('클래스', '질문 상자 쇼');.

올바른 방법은 다음과 같습니다. $ ('div .question-box'). addClass ('question-box show');

도움이 되길 바랍니다.