custom events backbone.modelbinder

257 views Asked by At

I'm trying to determine if I can use ModelBinder in a project I'm working on, but I need to be able to run a 3rd-party validation routine before updating the model. I've tried setting up a fiddle to test the Configuration Options mentioned towards the end of the documentation, but I can't seem to get it to work.

In the following fiddle (largely stolen from the example fiddles), I've attempted to set the event 'focus' to trigger the update, but it's not working. Can anyone help me to understand why?

http://jsfiddle.net/B9DSr/8/

Code:

HTML:

<div id="testarea">
<br>
Model data: <div id="modelData"></div>

<hr><br>
<div id="viewContent"></div>
</div>

JS:

$().ready(function () {

Backbone.ModelBinder.SetOptions = ({
    changeTriggers : {'': 'focus'}
});  

model = new Backbone.Model();
model.set({firstName: 'Bob'});
model.bind('change', function () {
  $('#modelData').html(JSON.stringify(model.toJSON()));
});

ViewClass = Backbone.View.extend({
    _modelBinder: undefined,
    initialize:function () {
        this._modelBinder = new Backbone.ModelBinder(); 
        //console.log( this._modelBinder);
    },
    close: function(){
        this._modelBinder.unbind();
    },
    render:function () {
        var html = '\
\
<div id="welcome"> Welcome, <span name="firstName"></span> <span name="lastName">       </span>\
<br><br>\
Edit your information:\
<input type="text" name="firstName"/>\
<input type="text" name="lastName"/></div>\
\
';
        //console.log(this.$el);
        this.$el.html(html);
        this._modelBinder.bind(model, this.el);
        return this;
    }
});

view = new ViewClass();
$('#viewContent').append(view.render().$el);
});

Assuming that there's an obvious coder (me) error in there, does anyone know if it's possible to define a custom event/handler for ModelBinder, which would allow me to validate the input before handing it to ModelBinder for processing back to the model?

Many thanks!

Trav

0

There are 0 answers