Div 디스플레이 Backbone.js

Question

메신저 백본 .js를 사용하기 시작하고 im은 javascript를 사용하여 간단한 작업을 수행하려고합니다. 이는 div 표시/숨기기입니다. 내가 div를 보여 주지만 나는 그것을 숨길 수 없어, 나는 많은 것을 시도, 어떤 생각? 아니면 더 정교 할 수 있을까요?

// If `this.el` is a string, pass it through `$()`, take the first 
// matching element, and re-assign it to `el`. Otherwise, create 
// an element from the `id`, `className` and `tagName` properties. 

귀하의 코드는 말합니다 :

var Step1View = Backbone.View.extend({ 
    el: $('body'), 
    events: { 
     'click #more': 'more', 
     'click #hide': 'hide', 
    }, 

    initialize: function(){ 
     _.bindAll(this, 'render', 'more', 'next', 'less'); 
     this.render(); 
    }, 

    render: function(){ 
     var self = this; 
     $(this.el).append("<a id='more'>Show more</a>"); 
     $(this.el).append("<div id='show' style='display: none'>Div12</div>"); 
     return this; 
    }, 

    more: function(){ 
     $('#more').text('Hide more'); 
     $('#more').attr('id', '#hide'); 
     $('#show').show(); 
    }, 

    less: function(){ 
     $('#hide').text('Show more'); 
     $('#show').hide(); 
    }, 

}); 

건배

Answer 1

여기에 많은 문제가 있습니다.

당신은 존재하지 않는 hide 방법, 당신의 events은 다음과 같아야 이벤트를 결합하려는 :

events: { 
    'click #more': 'more', 
    'click #hide': 'less', 
}, 

귀하의 initialize 방법은 방법 next, 존재하지 않는 결합을 시도를 .

initialize: function(){ 
    _.bindAll(this, 'render', 'more', 'less'); 
    this.render(); 
}, 

귀하의 more 방법은 id#hide에 설정되어 있지만 hide해야합니다 : 귀하의 initialize 더 같이해야

이

more: function(){ 
    $('#more').text('Hide more').attr('id', 'hide'); 
    $('#show').show(); 
}, 

귀하의 less 방법은 more로 다시 id을 전환하지 않습니다 :

less: function(){ 
    $('#hide').text('Show more').attr('id', 'more'); 
    $('#show').hide(); 
} 

그리고 less 뒤에 빗나간 쉼표가있어서 일부 브라우저가 만족스럽지 않게됩니다.

데모 : 그 같은 id 특성을 스와핑은 http://jsfiddle.net/ambiguous/8HkdT/

조금 사기입니다. <div>과 함께 표시하거나 숨기는 별도의 링크 또는 토글 버튼 하나만 표시하고 숨길 수 있습니다.

Answer 2

백본 소스 코드를 말한다 el: $('body')하지만 el: 'body'

그리고 백본 0.9 있기 때문에, 대신 this.$el을 사용할 수 있습니다 말을 충분 $(this.el) :

http://documentcloud.github.com/backbone/#View-$el

'click #hide': 'hide' 대신 'click #hide': 'less'을 쓰고 싶을 것입니다.