代码之家 › 专栏 › 技术社区 › pmnazar

脊梁骨js:在将模型添加到集合之前不进行工作验证

backbone.js javascript

pmnazar · 技术社区 · 9 年前

当我尝试在添加到集合之前验证模型时,这不起作用。当我尝试添加空时,它不起作用 test . 对不起我的错 Backbone.js 英语)。

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

谢谢你的帮助

1 回复 | 直到 9 年前

dexhering 9 年前

我们开始了

在:App.Views中。AddTest将是验证,验证始终在模型中而不是集合中

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