Div дисплей с Backbone.js - PullRequest
Новая
       23

Div дисплей с Backbone.js

2 голосов
/ 18 февраля 2012

Я начинаю использовать Backbone.js, и я пытаюсь сделать что-то простое с javascript, то есть показать / скрыть div.Я могу показать 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();
    },

});

Ура

Ответы [ 2 ]

5 голосов
/ 19 февраля 2012

У вас здесь много проблем.

Вы пытаетесь привязать событие к несуществующему методу 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> или просто с одной кнопкой-переключателем , которая выполняет показ и скрытие.

2 голосов
/ 19 февраля 2012

Исходный код магистрали говорит: 

// 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.

Ваш код говорит: el: $('body'), но достаточно сказать el: 'body'

И, поскольку Backbone 0.9, вы можете использовать this.$el вместо $(this.el):

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

И вы, вероятно, хотели написать 'click #hide': 'less' вместо 'click #hide': 'hide'.

...