Question

在使用Backbone＆amp; amp; Marionette，我想将一些表单输入仅作为数字输入并使用千位分隔符。 Backbone ModelBinder自动检测表单中的更改。我实施了jQuery number plugin，效果很好。但问题是，当数字输入中有一个千位分隔符时，ModelBinder不起作用。当少于4位数字时（没有分隔符，一切正常。

Chrome上出现此问题。 Firefox上没有任何问题。

我没有任何线索如何解决或调试问题。

Answer 1

通过组合两者来解决问题：模型绑定器在输入更改时触发更改事件并将字段数据转发到模型。除了被数字插件篡改之外，所以出现问题。

相反，尝试使用ModelBinder的转换器绑定设置（https://github.com/theironcook/Backbone.ModelBinder#formatting-and-converting-values），它将允许您定义在从模型转到表单并返回时数据应如何格式化/解析。

Answer 2

使用ModelBinder的转换器代替jQuery插件。这是一个清理时间的示例（例如3p，3：00,3PM，15：00,1500等），如果可以解析输入，则以规范形式（ISO8601的时间部分）将数据存储在模型中，如果没有，则按原样存储，以便验证可以单独检查并提供错误。

当用户更改输入时，ModelBinder的转换器会被调用两次。首先，将输入数据从视图复制到模型direction === 'ViewToModel'。这允许进行清理并将输入值转换成适于存储的规范形式，例如，在这个例子中，在24小时的时间内使用秒（15:30:00）。其次，从模型返回到视图direction === 'ModelToView'，它允许您以友好的方式向用户呈现数据，在此示例中为12小时（3:30 PM）。

此示例使用time library来操作时间输入，解析并格式化。

<强>装订

在这种情况下，在使用Backbone.Marionette

呈现视图后立即调用onRender

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

<强>转换器

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;
  };

Backbone ModelBinder和jQuery插件

2 个答案: