骨干ModelBinder和jQuery插件

Question

In an application written with Backbone & Marionette, I want some of the form inputs as numeric only and with thousands separator. Backbone ModelBinder automatically detects changes in the form. I implemented jQuery number plugin which works fine. But the problem is that when there is a thousands separator in a numeric input, ModelBinder doesn't work. When there is less than 4 digits (without a separator everything is ok.

The problem occurs on Chrome. There isn't any problem on Firefox.

I don't have any clue how to solve or debug the problem.

Answer 1

You're asking for trouble by combining the two: model binder triggers change events when inputs change and forwards the fields data to the model. Except it has been tampered with by the number plugin, so issues arise.

Instead, try using ModelBinder's converter binding settings ( https://github.com/theironcook/Backbone.ModelBinder#formatting-and-converting-values ), it will allow you to defined how data should be formatted/parsed when going from the model to the form and back.

Answer 2

Use ModelBinder's converters for this instead of the jQuery plug-in. Here's an example that cleans up a time (eg 3p, 3:00, 3PM, 15:00, 1500, etc.), stores the data in the model in a canonical form (time portion of ISO8601) if the input can be parsed, and if not then it is stored as is so that validation can check it separately and provide an error.

ModelBinder's converters get called twice when a user changes an input. First when the input data is copied from the view to the model, direction === 'ViewToModel' . This allows for cleanup to occur and to transform the input value into a canonical form suited for storage, eg in 24-hour time with seconds ( 15:30:00 ) in this example. And secondly, from the model back to the view, direction === 'ModelToView' , which allows you to present the data to the user in a friendly manner, in 12-hour time ( 3:30 PM ) in this example.

This example uses a time library to manipulate the time input, parse it, and format it.

Binding

In this case onRender is called right after the view is rendered using Backbone.Marionette

onRender: function() {
  var bindings = ModelBinder.createDefaultBindings(this.$el, 'name');
  bindings.value.converter = ModelSaver.timeStringConverter;
  this.modelbinder.bind(this.model, this.$el, bindings);
}

Converter

ModelSaver.timeStringConverter = function(direction, value, attributeName, model, els) {
    var result;

    if (direction === 'ViewToModel') {
      if (!value)
        // if the input is empty, just pass it along so it can be deleted, and/or validation can indicate it was a required field
        result = value;
      else {
        // parse the input value and store it with the second component only if it's valid, if not, store the invalid value so that model validation can catch it
        result = new Time(value);
        result = result.isValid() ? result.format('HH:mm')+':00' : value;
      }
    }

    if (direction === 'ModelToView') {
      // chop off the seconds, parse, check for validity, and format
      result = value && new Time(value.substr(0,5));
      result = (value && result.isValid()) ? result.format('h:mm AM') : value;
    }

    return result;
  };