Apply jQuery function on an 'el' of backbone.js to get the value of its children

Question

I'm really new to backbone so the question may seem a bit naive. But I'm trying to figure out how to apply jQuery on an 'el' to get the value of an input.

Basically I have a form, and I want whenever the user makes some change to an input, the changed value is automatically saved to the model. But I'm having trouble getting the input value.

In my view, I have

  events : {
    'change input' : 'updateValue'
  }

And then I have the updateValue method like this:

  updateValue : function (e) {
    var input = $(this.el).find(input).val();
    console.log(input)
    this.model.updateValue(input);
  }

But my console is printing undefined. If I do var input = this.el then it can print the entire el, but when I try to do find(input) it says that it doesn't support that method. I've also tried this.$el and that doesn't work either.

So I'm wondering what's the correct way to find the input value, and wonder if this is the correct way to auto-save the form info. Thanks in advance!

Edit:

Thanks to asawyer, I changed it to var input = this.$('input').val() and it worked like a charm.

This also works: var input = $(e.currentTarget).val()

And see the accepted answer below for some explanation. Thanks so much guys =)

I think this is what you want: http://documentcloud.github.com/backbone/#View-dollar — asawyer, Aug 03 '12 at 18:00
Thanks @asawyer! I tried `var input = this.$("input").val();` and it worked. — danqing, Aug 03 '12 at 18:08
Great! Write up your solution as an answer, and accept it! :) — asawyer, Aug 03 '12 at 18:09
You could also have done $('e.target') since in this case the input was the target element. — robmisio, Aug 03 '12 at 18:12
@robmisio Oh wow you are right. I didn't even notice it was an event handler. — asawyer, Aug 03 '12 at 18:13
@robmisio seems that `var input = $('e.target')` is giving me an empty array... — danqing, Aug 03 '12 at 18:15
that worked. `var input = $(e.currentTarget).val()`. Thanks! — danqing, Aug 03 '12 at 18:22

score 2 · Accepted Answer · answered Aug 03 '12 at 18:14

This is more of a jquery question actually. This is what your code should look like:

updateValue : function (e) {
  var input = this.$(":input").val();
  console.log(input)
  this.model.updateValue(input);
}

You were missing the "" around input, but I took the liberty of throwing in a few backbone/jquery tips as well.

The this.$(":input") method is a shortcut for $(":input", this.el) which looks for the jquery selector inside the view element, see the documentation. ":input" in this case matches all form inputs including textarea, select, etc, see jQuery :input selector.

Also, if you want to catch all inputs, not just the <input> element, try:

events : {
  'change :input' : 'updateValue'
}

Ah, took too long adding references to the answer, asawyer beat me to it :) — Jens Alm, Aug 03 '12 at 18:15
Lemme try yours and if it works I'll accept it =). Don't feel too comfortable accepting my own answer haha. — danqing, Aug 03 '12 at 18:17

Apply jQuery function on an 'el' of backbone.js to get the value of its children

1 Answers1