CODEWITHSUNDEEP
javascripteventsbackbone.js
SwissNavy
SwissNavy

Reputation: 649

Backbone.js: Why isn't event firing the second time (delegateEvents did not help)

This seems to be a popular topic, however, after trying several proposed solutions from 5 different answers I still can't get it right. I have a simple form that appends input from two fields to the screen. "Add" button works once (the entered data is displayed) and does not fire its event on the second click (I checked - the event's render is not executed any more). Most of suggested fixes involve adding this.delegateEvents() at the end of the views' render methods - did not have any effect in my case, maybe I did not do it right. I think what I am doing is just simpler that those issues other guys had to tackle.

I realize that the whole thing can be structured better/differently, I just followed one of the tutorials and got stuck at that second click issue. I just want to know: 1. exactly what in my code caused that bug. 2. how to overcome it, preferably without rewriting the whole thing.

Thanks!

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Name List</title>
    <link rel="stylesheet" href="name_book.css"/>
</head>
<body>

<div class="container"></div>     
    <div class="div_people"></div>
    <hr>
    <div class="div_inputs"></div>
</div>


<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>

<!--template for the inputs-->
<script type="text/template" id="inputs">
    Please enter name and city below:<br>
    <form id="add_person_form" class="add_person_form">
    <div id="div_input_name" class="input_name" style="float:left"><input id="input_name" type="text" /></div>
    <div class="div_input_city" style="float:left"><input id="input_city" type="text" /></div>
    <a href="#/add" class="input_submit_submit">Add</a>
    </form>
</script>

<!--template for the screen output row-->
<script type="text/template" id="person_info">
    <span class="person_name"><%= person_name %></span>
    <span class=spacer></span>
    <span class="person_city"><%= person_city %></span>
    <br>
</script>

<script>
    //class constructor
    var Router = Backbone.Router.extend({
        routes: {
            '': 'home',
            'add': 'addPerson'
        }
    });

    var router = new Router();

    var InputsList = Backbone.View.extend({
        el: '.div_inputs',
        render: function() {
            var template = _.template($('#inputs').html(), {});
            this.$el.append(template);
        }
    });

    var inputsList = new InputsList();
    router.on('route:home', function() {
        inputsList.render();
    });         

    var PeopleList = Backbone.View.extend({
        el: '.div_people',
        render: function() {        
            var template_person = _.template( $("#person_info").html(), {person_name: $("#input_name").val(), person_city: $("#input_name").val()} );
            this.$el.append(template_person);
        }
    });

    var peopleList = new PeopleList();

    router.on('route:addPerson', function() {
        peopleList.render();
    });     

    Backbone.history.start();
</script>
</body>
</html>

Upvotes: 0

Views: 313

Answers (1)

Luke
Luke

Reputation: 8407

if the route #/add does not change, then there is nothing that would trigger a change. if you want a notification on every click, you need to listen to a click event.

Backbone.View.extend({
    events : {
        "click .input_submit_submit" : "myCallbackOnClick"
    },
    myCallbackOnClick : function(ev) {
        // <a> i was clicked
        ev.preventDefault();
        this.someOptionToRenderDifferently = true;
        peopleList.render();
    }
});

Upvotes: 1

Related Questions