如何使用Marionette.js的Backbone.Validation插件

Question

我在我的Marionette.js應用程序中使用Twitter Bootstrap3和Backone.Validation（ http://thedersen.com/projects/backbone-validation/ ）插件，但有些人怎么說都不能正確。 任何人都可以舉例說明如何使用Backbone.Validation與Marionette.js（示例類似於http://thedersen.com/projects/backbone-validation/#examples和_http：//jsfiddle.net/thedersen/ c3kK2 /）

更新：我有以下編碼，我希望在提交表單后將驗證驗證，但遺憾的是沒有發生任何事情，甚至沒有錯誤。 在我的app.js（全球）

//Backbone.Validation
Backbone.Validation.configure({
    forceUpdate: true
});

_.extend(Backbone.Validation.callbacks, {
    valid: function (view, attr, selector) {
        var $el = view.$('[name=' + attr + ']'),
            $group = $el.closest('.form-group');

        $group.removeClass('has-error');
        $group.find('.help-block').html('').addClass('hidden');
    },
    invalid: function (view, attr, error, selector) {
        var $el = view.$('[name=' + attr + ']'),
            $group = $el.closest('.form-group');

        $group.addClass('has-error');
        $group.find('.help-block').html(error).removeClass('hidden');
    }
});

我的模板看起來像這樣：

<script id="signup-form" type='text/template'>
        <form class="form-signin control-group">
            <table>
                <tr><th><h2 class="form-signin-heading">Please sign up</h2></th></tr>
                <tr><td><input type="text" class="form-control" name="username" placeholder="Email address"></td></tr>
                <tr><td><input type="password" class="form-control" name="password" placeholder="Password"></td></tr>
                <tr><td><button class="btn btn-success form-control js-submit">Sign up</button></td></tr>
            </table>
        </form>

我的模型看起來像這樣：

Entities.User = Backbone.Model.extend({
    urlRoot: "signup",

    defaults: {           

    },

    idAttribute: "_id",

    validation: {
        email: {
            required: true,
            pattern: 'email'
        },
        password: {
            minLength: 8
        }
    },
    validate:true
});

我的觀點看起來像這樣

Show.SignupPanel = Marionette.ItemView.extend({

    template: "#signup-form",


    events: {
        'click button.js-submit': 'signupClicked'
    },

    signupClicked: function (e) {
        //stop the default action of <a> tag and page refresh
        e.preventDefault();
        var data = Backbone.Syphon.serialize(this);
      if(this.model.isValid(true)) 
            this.trigger("form:submit", data);
    },

    initialize: function () {
        // This hooks up the validation
        // See: http://thedersen.com/projects/backbone-validation/#using-form-model-validation/validation-binding
        Backbone.Validation.bind(this);
    },

    remove: function () {
        // Remove the validation binding
        // See: http://thedersen.com/projects/backbone-validation/#using-form-model-validation/unbinding
        Backbone.Validation.unbind(this);
        return Backbone.View.prototype.remove.apply(this, arguments);
    }

});

Answer 1

我找到了這個： http ： //spin.atomicobject.com/2013/11/25/forms-marionette-js-backbone/

希望它有所幫助