Событие щелчка Backbone.js не срабатывает

Я пытался изучить backbone.js, но не могу понять, почему мое событие click не запускается, когда я нажимаю ссылку на главную. Я новичок в Backbone и просто не уверен, что мне не хватает? Я просмотрел кучу разных руководств в сети, но, похоже, не могу найти дыру для проигрыша. Пожалуйста помоги!

Backbone.js

    var HomeView = Backbone.View.extend({
        el: $('.content'),

        events:{
            "click #home": "animateNavigation"
        },
        initialize: function(){
            _.bindAll(this, 'displayTrips'); 

            // Add the model collections
            this.collection = new ModelList();
            this.collection.bind('add', this.displayTrips); // Collection event binder
        },
        animateNavigation: function(){
            alert('test');

            return false;
        },
        displayTrips: function(params){
            var items = params.get('data');
        }
    });

    var home_view = new HomeView();

HTML

<div class="content">
     <div class="left">
        <ul>
            <li>
                <div class="nav_arrow"></div>                   
                <a href="home" class="active" id="home">
                    <img alt="Home" src="/assets/img/nav/left/star.png">
                    <span>Home</span>
                </a>
            </li>
            <li>
                <a href="tropical" id="tropical">
                    <img alt="Tropical" src="/assets/img/nav/left/fins_grey.png">
                    <span>Tropical</span>
                </a>
            </li>
        </ul>
    </div>
</div>

backbone.js backbone-events backbone-views
person Jason Biondo    schedule 16.08.2012    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Вы находите элемент во время объявления модели. Если у вас есть сценарий в заголовке или где-либо до этого содержимого, этот элемент еще не существует. Я не знаю, должна ли быть какая-то веская причина использовать здесь $('.content'), просто используйте '.content'

Изменить: Ну, я вижу, вы также объявляете новый экземпляр своего представления. Я не знаю, представляет ли эта строка буквально то, что у вас есть в вашем скрипте, или вы просто поместили ее туда с целью демонстрации вашего основного использования. Я обычно определяю представления и модели в другом месте из логики страницы (которые будут иметь экземпляры этих вещей), в первую очередь для того, чтобы я мог их повторно использовать.

person JayC    schedule 16.08.2012

arrow_upward
0
arrow_downward

Не могли бы вы добавить

console.log(home_view.$el.html());

в конце, пожалуйста, проверьте Dom Element в home_view. Я предполагаю, что что-то пойдет не так при привязке представления к элементу Dom.

person schacki    schedule 16.08.2012

arrow_upward
0
arrow_downward

Я обнаружил, что это решило это для меня:

var home_view = new HomeView({el:$('.content')});

ОБНОВЛЕНИЕ - лучше, чем это, сделайте это:

var home_view = new HomeView({el:'.content'});

тогда this.$el будет работать, как сказано в сообщении выше

person sambooka    schedule 30.11.2012