Search code examples
javascriptbackbone.js

Backbone.js: Not work validate before add model to collection


When I try validate model before add to collection this not work. It's not work when i try add empty test. Sorry for my bad Backbone.js and English).

(function() {
    window.App = {
      Models: {},
      Views: {},
      Collection: {}
    };

    window.template = function(id) {
        return _.template($('#' + id).html());
    };

    App.Models.Test= Backbone.Model.extend({
        validate: function(attrs) {
            console.log(attrs.title);
            if(!attrs.title || attrs.title == "") {
                return 'bad';
            }
        }
    });


    App.Views.Test= Backbone.View.extend({
        tagName: 'li',
        className: 'clearfix',

        template: template('testId'),

        initialize: function() {
            this.model.on('change', this.render, this);
            this.model.on('destroy', this.remove, this);
        },

        render: function() {
            this.$el.html(this.template(this.model.toJSON()));
            return this;
        },

        remove: function() {
            this.$el.remove();
        },

        add: function() {
            this.$el.html(this.template(this.model.toJSON()));
        },

        events: {
            "click .edit": "editTest",
            "click .del": "delTest"
        },

        editTest: function() {
            var renameTest= prompt('How rename test?', this.model.get('title'));
            this.model.set('title', renameTest, {validate: true});
        },

        delTest: function() {
            this.model.destroy();
        }
    });
    App.Views.AddTest= Backbone.View.extend({
        el: '#addTest',

        initialize: function() {
        },

        events: {
            "submit": "submit"
        },

        submit: function(e) {
            e.preventDefault();

            var newTestTitle = $(e.currentTarget).find('input[type=text]').val(),
                    addModelTest= new App.Models.Test({
                title: newTestTitle
            });

            console.log(addModelTest.attributes);

            this.collection.add(addModelTest, {validate: true});
        }
    });
    App.Collection.Test= Backbone.Collection.extend({
        model: App.Models.Test
    });
    App.Views.Tests = Backbone.View.extend({
        tagName: 'ul',
        className: 'clearfix',

        initialize: function() {
            this.render();
            this.collection.on('add', this.addOne, this);
        },

        render: function() {
            this.collection.each(this.addOne, this);
            return this;
        },

        addOne: function(test) {
            var testView = new App.Views.Test({model: test});
            this.$el.append(testView.render().el);
        }
    });

    var testsCollection = new App.Collection.Test([
        {
            title: 'test1'
        },
        {
            title: 'test2'
        },
        {
            title: 'test3'
        }
    ]);

    testsCollection.on('add', function() {
        console.log('added ', arguments);
    });
    testsCollection.on('add', function() {
        console.log('bad ', arguments);
    });

    var testsView = new App.Views.Tests({collection: testsCollection});
    $('.tests').append(testsView.el);


    var addNewTest= new App.Views.AddTest({collection: testsCollection});
  }());

Thanks for help


Solution

  • Here we go

    in: App.Views.AddTest will be the validation, the validation always been in the models not on the collection

    submit: function(e) {    
        e.preventDefault();
        var newTestTitle = $(e.currentTarget).find('input[type=text]').val();
        // models are those who must validate, not the collection
        var addModelTest = new App.Models.Test({ title: newTestTitle }, {validate: true});
        // and check the validationError atribute for the result
        if(!addModelTest.validationError)
            this.collection.add(addModelTest);    
        else
            console.log(addModelTest.validationError);
    }