Question

我正在对我的用户名和密码进行简单验证。我的模型在这里：

define(["backbone"], function(Backbone){
    var LoginModel = Backbone.Model.extend({
        url:'/home',
        defaults:{
                userName:'',
                password:''
        },
        initialize:function(){
            this.bind("change", this.attributesChanged);
        },
        validate:function(attrs){

            var errors = [];
            if(attrs.userName < 5){
                 errors.push({"name": 'userName', "message": 'Please fill email field.'});
            }
            if(!attrs.password){
                errors.push({"name": 'password', "message": 'Please fill feedback field.'});
            }
            return errors.length > 0 ? errors : false;
        },
        attributesChanged : function(){
            var valid = false;
            if (this.get('userName') && this.get('password')) {
                valid = true;
                this.trigger("validated", valid);
            }           
            else {
                this.trigger('invalid', valid); //triggers the invalid works fine.
            }
        }

        });

    return LoginModel;
});

但是在视图中，我仍然得到了触发器，但是我无法获得视图的元素以突出显示输入：

这是我的观点：

define([
    'jQuery','underscore',
    'backbone','marionette',
    'text!./templates/loginView.html'],
    function($,_,Backbone,Marionette,template){
        "use strict";

        var LoginView = Backbone.Marionette.ItemView.extend({

            className:'col-xs-12 col-md-4 col-md-offset-4',

            template:_.template(template),

            events:{
                "submit form" : "loginSubmit"
            },

            initialize:function(params){
                this.model.view = this;
                this.model.bind("validated", this.validated);
                this.model.bind("invalid", this.showErrors);
            },

            loginSubmit:function(e){

                e.preventDefault();
                var form = e.target,
                    data = Backbone.Syphon.serialize(form);

                var that = this;

                var options = {
                    success: function (model,response) {
                        if(response){
                            console.log('success', response)
                        } else {
                            console.log('failed')
                        }
                    },
                    error: function(model, options){
                        console.log("error", xhr.responseText);
                    }
                };

                this.model.save(data, options);
                // this.model.on('invalid', function(model, error) { console.log(model,'\n', error); })
            },

            validated:function(value){
                console.log(value);
            },

            showErrors:function(model, error){
                var form = this.$el.find('form'); // i am not able to get form element here... what is the issue?
                _.each(error, function(value, key){
                    var input = form.find('input[name='+value.name+']').addClass('error');
                    input.after('<span class="errorMsg">'+value.message+'</span>');
                });
            },

            hideErrors:function(msg){
                console.log('login success!');
            },

            onShow:function(){
                $('input:text').first().select();
            }

        });

        return LoginView;
    }
);

我对这部分感到困惑，任何帮助我理解的事情：

1）如何区分“验证”方法或“服务器”

中的错误

2）如何妥善处理这个问题？

3）我在这里发布了什么是正确的方法？

我在这方面没有那么有经验，任何专家都可以帮我继续我的app dev？

不要指导我阅读一些书籍，我遇到过请帮助我学习我的代码。提前谢谢！

Answer 1

我将在下面回答你的问题：

invalid事件是从validate触发的（您可以考虑使用，因为您可以在set属性上进行验证）。响应来自服务器时会触发error事件。
validate不会向服务器发送信息。如果那是您正在寻找的响应，您应该使用它。
你所拥有的是非常好的。

以下是修复参考问题的方法：

而不是在您的视图中initialize：

initialize:function(params){
  this.model.view = this;
  this.model.bind("validated", this.validated);
  this.model.bind("invalid", this.showErrors);
}

你应该这样做：

initialize:function(params){
  this.model.view = this;
  this.listenTo(this.model, "validated", this.validated);
  this.listenTo(this.model, "invalid", this.showErrors);
}

确保在关闭视图时，将删除事件。它还可以确保您方法中的this引用您的视图。现在，它指的是你的模型。

另外，如果您希望在视图中find选择器，则可以使用快捷键this.$ - 与this.$el.find相同。

Backbone View - 在模型触发后找不到$ el

1 个答案: