使用Backbone.js显示Div

Question

我开始使用Backbone.js和我试图用javascript做简单的事情,这是显示/隐藏divs.我得到显示div但我无法隐藏它,我尝试了很多东西,任何想法？或者可能更复杂？

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方法是设置为id,#hide但它应该是hide:

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

您的less方法不会切换id回more:

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

并且你有一个迷路的逗号,之后less会让一些浏览器不高兴.

演示:http://jsfiddle.net/ambiguous/8HkdT/

交换这样的id属性有点狡猾.您最好使用单独的链接显示和隐藏,<div>或者只显示一个切换按钮,同时显示和隐藏.