Блог

Это мой первый настоящий магистральный проект, над которым я пытаюсь работать в свободное время, чтобы лучше понять все это. Проверка формы меня немного смущает.

Я думаю, что у меня здесь правильно настроена модель:

 var User = Backbone.Model.extend({
    defaults: {
        "firstname": "",
        "lastname": "",
        "age": null
    },
    url: '/UMA.Service/Service1.svc/',
    validate: function(attr) {
        var errors = [];
        if (!attr.FirstName) {
            errors.push({name: 'firstname', message: 'Please fill in first name field.'});
        }
        if (!attr.LastName) {
            errors.push({name: 'lastname', message: 'Please fill in last name field.'});
        }
        if(!attr.Age) {
            errors.push({name: 'age', message: 'Please fill in age field.'})
        }

        return errors.length > 0 ? errors : false;
    }
});
  

Я не совсем уверен, как мне следует реализовать это на мой взгляд сейчас. В настоящее время у меня это так, что когда я нажимаю кнопку отправки, это происходит .save() , но я бы хотел, чтобы она проверяла форму на наличие ошибок. Если есть ошибки, подскажите пользователю и оставайтесь на странице. если нет, то .save() .

Вот как теперь настраивается мое представление:

 var EditUser = Backbone.View.extend({
    el: '.page',
    render: function() {
        var template = Handlebars.compile($('#edit-user-template').html());
        this.$el.html(template);
    },

    events: {
        'submit .edit-user-form': 'saveUser',
        'click #new-user-cancel': 'cancelNewUser'
    },

    saveUser: function (ev) {
        var me = this;
        var user = new User();
        var firstName = $('.edit-user-form #firstname').val();
        var lastName = $('.edit-user-form #lastname').val();
        var age = $('.edit-user-form #age').val();

        user.save({
            FirstName: firstName,
            LastName: lastName,
            Age: age
        },{
            success: function(user) {
                router.navigate('', {trigger: true});
            }
        });
    },

    cancelNewUser: function() {
        userList.fetchUsers();
        router.navigate('', {trigger: true});
    }

});
  

Я уверен, что мне нужно немного поработать. Кто-нибудь сможет указать мне правильное направление хорошего руководства или помочь мне найти правильный способ передачи ошибок на мой взгляд? Спасибо!

В Backbone есть плагин, который делает это действительно простым, см. https://github.com/thedersen/backbone.validation

Это простой код, просто чтобы показать, как это работает. ( CoffeeScript)

Внутри вашей модели

 validation:
   Age:
     required: true
     min: 18
     msg: 'Invalid Age.'

saveNewClient:-> 
    performValidation = true
    if @isValid(performValidation)
        @save()
  

Если вы моделируете функцию проверки, при вызове метода ( isValid(true) ) backbone выполнит всю вашу проверку, и если что-то не так, оно не сохранится.

Попробуйте прочитать об этом плагине, приведенный выше код — всего лишь простой пример.

Надеюсь, это поможет.

Я смог исправить это, сохранив мою модель таким же образом, а затем добавив эту функцию на мой взгляд для проверки:

 userError: function(e){
        var validationError = e['validationError'];
        var errorContainer = $('#error-container');
        _.each(validationError, function(obj){
            var errorFocus = this.$('#'   obj.name);
            errorFocus.parent().addClass('has-error');
            errorContainer.append('<span id="'   obj.name   '-message">'   obj.message   '<br></span>');
        });

        errorContainer.removeClass('hide').hide().slideDown();
    },
  

 saveUser:function(e){

    var me = this;
    var user = new User();
    var firstName = $('.edit-user-form #firstname').val();
    var lastName = $('.edit-user-form #lastname').val();
    var age = $('.edit-user-form #age').val();
    user.set({
        FirstName: firstName,
        LastName: lastName,
        Age: age
    });

if (!user.isValid()) {
                alert("Validation Errors, please fix");
                return; //Do not save
            }else{
      save();      //write the save logic here
   }

}
  

Документы — http://backbonejs.org/#Model-isValid