CODEWITHSUNDEEP
backbone.js
kidcapital
kidcapital

Reputation: 5174

How to bind elements in backbone?

I have a small backbone class:

view = Backbone.View.extend({
    events: {
        "click textarea" : "doSomething"
    },
    doSomething : function() {
        var textarea = $(this.el).find('textarea')
        // I would like to just call, this.textarea, or this.elements.textarea
    }
});

Ideally I would like to be able to access my textarea through a variable instead of having to search the element every time. Anyone have any idea on how to accomplish this?

Upvotes: 1

Views: 2352

Answers (3)

maxl0rd
maxl0rd

Reputation: 1446

The other answers get you the reference that you need, but if you really need a handle to the textarea, then you can do something like this:

view = Backbone.View.extend({
  initialize: function() {
    this.myTextareaElement = $(this.el).find('textarea')
  }
  events: {
    "click textarea" : "doSomething"
  },
  doSomething : function() {
    // use this.myTextareaElement ...
  }
});

Upvotes: 1

afj176
afj176

Reputation: 209

maybe i am under thinking it but how bout giving the textarea a class or id and target specifically when needed,

or create a sub view that generates the textarea

var View = Backbone.View.extend({
    el: '#main',
    initialize: function(){
        this.render();
    },
    render: function() {
        var subview = new SubView();
        this.$('form').append(subview.el);
        this.$('form').show();
    },
});

var SubView = Backbone.View.extend({
    tagName: 'textarea',
    id: 'whateverId',
    events: {
        "click" : "doSomething"
    },
    initialize: function(){
        this.render();
    },
    doSomething : function(event) {
        var textarea = $(event.target);
        // or var textarea = $(this.el);
    },
    render: function(){
        return $(this.el);
    }
});

Upvotes: 1

afj176
afj176

Reputation: 209

pass the event as the argument and then use the event target

view = Backbone.View.extend({

    events: {
      "click textarea" : "doSomething"
    },
    doSomething : function(event) {
      var textarea = $(event.target);

    }

});

Upvotes: 0

Related Questions