DivディスプレイのBackbone.js

Question

backbone.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がより次のようになります。

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

あなたmore方法は#hideにidを設定しているが、それはhide次のようになります。

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>と一緒に表示/非表示にする別々のリンクや、のトグルボタンを1つだけ表示したり隠したりする方が良いでしょう。

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'と書いたかったでしょう。