CODEWITHSUNDEEP
javascriptjqueryeventsbackbone.jsunderscore.js
David Jones
David Jones

Reputation: 10219

Unable to bind click event in Backbone

I can't seem to bind a click event to an action in the snippet below. Any ideas?

var SelectView = Backbone.View.extend({
  template: "#select-template",
  initialize: function() {
    this.render();
  },
  events: {
    "click .placeholder": "optionsDropdown",
  },
  render: function() {
    context = {className: this.className, options: this.model.get("options"), placeholder: this.model.get("placeholder")};
    $(this.el).html(getHTML(this.template, context));
  },
  optionsDropdown: function() { 
    alert("Hello");
  },
});

Upvotes: 1

Views: 188

Answers (3)

Sushanth --
Sushanth --

Reputation: 55740

I think the problem is this line

className: this.className

I don't see the className variable anywhere in the view definition

  var SelectView = Backbone.View.extend({
    initialize: function () {
        this.className = 'placeholder';
    },
    events: {
        "click .placeholder": "optionsDropdown",
    },
    render: function () {
        context = {
            className: this.className,
            options: this.model.get("options"),
            placeholder: this.model.get("placeholder")
        };
        var template = _.template( $("#select-template").html(), context );

        this.$el.html(template);
    },
    optionsDropdown: function () {
        alert("Hello");
    },
});

var Model = Backbone.Model.extend({});

var newModel = new Model({
    'options' : 'Hello',
    'placeholder' : 'Type your name'
});

var newView = new SelectView({model : newModel});
newView.render();
$('.container').append(newView.el);

Check Fiddle

You are binding the click event for the class="placeholder" which is supposed to be in the template. Once you define that it should work provided that you have the element with that class in your template.

Calling render from initialize

Upvotes: 1

Gokul Kav
Gokul Kav

Reputation: 849

you can have a DOM element binded to the handler e.g., "click li":"optionsDropDown"

edit: you are missing the target element.. heres a working fiddle http://jsfiddle.net/FGeJd/

Upvotes: 0

MrTorture
MrTorture

Reputation: 819

You're missing a selector in the event definition. It should be something like this (assuming the input id is optionsId):

events : {
    "click #optionsId": "optionsDropDown"
}

Upvotes: 0

Related Questions