与 require.js 和 backbone.stickit 一起使用时出现奇怪的 Backbone.Validation 错误

Posted

技术标签:

【中文标题】与 require.js 和 backbone.stickit 一起使用时出现奇怪的 Backbone.Validation 错误【英文标题】:Weird Backbone.Validation bug when used with require.js and backbone.stickit 【发布时间】:2014-06-19 04:43:00 【问题描述】:

我将 T. Hedersen 的主干.验证插件 (https://github.com/thedersen/backbone.validation) 与用于模型绑定的主干.stickit 插件结合使用很有趣。我遇到了一个奇怪的错误,当模型的单个属性发生变化时,它会不断验证所有字段。这是代码

型号

define(function(require) 

    "use strict";
    var $ = require('jquery'),
            Backbone = require('backbone'),
            Validation = require('backbone.validation'),
            applicantModel = Backbone.Model.extend(
        defaults: 
            firstName: '',
            middleName: '',
            lastName: ''
        ,
        initialize: function() 
        ,
        validation: 
            firstName: 
                required: true
            ,
             middleName: 
                required: true
            ,
            lastName: 
                required: true
            

        
    );

    return new applicantModel;
);

查看

定义(函数(要求)

"use strict";

var $ = require('jquery'),
        _ = require('underscore'),
        Backbone = require('backbone'),
        tpl = require('text!templates/primaryApplicantInfo.html'),
        lovValues = require('application/models/lovModel'),
        Stickit = require('stickit'),
        ApplicantModel = require('application/models/applicantModel'),
        Validation = require('backbone.validation'),
        template = _.template(tpl),

        applicantView = Backbone.View.extend(
         initialize: function() 
         console.log('Inside the initialization function');



        this.render();
    ,
    bindings: 
        '[name=firstName]': 
            observe: 'firstName',
            setOptions: 
                validate: true
            
        ,
        '[name=middleName]': 
            observe: 'middleName',
            setOptions: 
                validate: true
            
        ,
        '[name=lastName]': 
            observe: 'lastName',
            setOptions: 
                validate: true
            
        
    ,

    render: function() 
        console.log("Inside applicant view");
        //Render application header
        this.$el.html(template);
        this.stickit();
        Backbone.Validation.bind(this, 
        //The problem is here, this executes for all the attributes of the model when changing a single attribute
            forceUpdate: true,
            valid: function(view, attr) 
                console.log("Validity is proper for "+attr);
            ,
            invalid: function(view, attr, error) 
                console.log("Validity is improper for "+attr);
            
        );
        $.each(lovValues.toJSON().suffix, function(val, text) 
            console.log(text.text);
            $('#applicantInfoSuffix').append(new Option(text.text, text.value));
        );

【问题讨论】:

【参考方案1】:

不要将模型的默认值设置为''。如果可能,请删除默认值。

定义(函数(要求)

"use strict";
var $ = require('jquery'),
        Backbone = require('backbone'),
        Validation = require('backbone.validation'),
        applicantModel = Backbone.Model.extend(
    initialize: function() 
    ,
    validation: 
        firstName: 
            required: true
        ,
         middleName: 
            required: true
        ,
        lastName: 
            required: true
        

    
);

return new applicantModel;

);

【讨论】:

以上是关于与 require.js 和 backbone.stickit 一起使用时出现奇怪的 Backbone.Validation 错误的主要内容,如果未能解决你的问题,请参考以下文章

sea.js与require.js的区别

加载Dropzone.js与Require.js

Require.js与Sea.js的区别

与 require.js 和 backbone.stickit 一起使用时出现奇怪的 Backbone.Validation 错误

require.js+backbone 使用r.js 在本地与生产环境 一键压缩的实现方式

require.js+backbone 使用r.js 在本地与生产环境 一键压缩的实现方式