3

登録コンポーネントを処理するバックボーンビューがあります。これには多くのフォームアクセスが必要だったため、フォームセレクターをオブジェクトプロパティに格納することを考えました。

define(["models/security/user", 'text!templates/security/registration.html'], function(SecurityUserModel, Template){

    var SecurityRegistrationView;

    SecurityRegistrationView = Backbone.View.extend({
        initialize: function(){
            this.model = new SecurityUserModel();
            this.model.bind("validated:valid", this.valid);
            this.model.bind("validated:invalid", this.invalid);

            Backbone.Validation.bind(this);

            this.render();
        },
        render: function(){
            $(this.el).append(Template);
        },
        events: {
            "submit form": "submit"
        },
        form: {
            "username": $("#_user_username")
            , "email": $("#_user_email")
            , "password": $("#_user_password")
        },
        submit: function(e){
            e.preventDefault();

            this.model.set("username", this.form.username.val());
            this.model.set("password", this.form.email.val());
            this.model.set("email", this.form.password.val());
            this.model.validate();


            // debug    
            console.log([this.form, this.form.username.val(), this.form.email.val()]);

            if (this.model.isValid) {
                this.model.save();
            }
        },
        valid: function(model, attrs){
            // error
            this.form.attrs[0].username.parent("div.control-group").addClass("success");
        },
        invalid: function(model, attrs){
            // error
            this.form.attrs[0].username.parent("div.control-group").addClass("error");
        }
    });

    return SecurityRegistrationView;
});

console.log this.formを実行すると、未定義または奇妙なものは何もない、非常に見栄えの良いオブジェクトが得られます。

[
Object
    email: e.fn.e.init[0]
        context: HTMLDocument
        selector: "#_user_email"
        __proto__: Object[0]
    password: e.fn.e.init[0]
        context: HTMLDocument
        selector: "#_user_password"
        __proto__: Object[0]
    username: e.fn.e.init[0]
        context: HTMLDocument
        selector: "#_user_username"
        __proto__: Object[0]
    __proto__: Object
]

セレクターにアクセスするjquery関数（this.form.username.val（））をログインすると、未定義で失敗します。

プロパティでjQuery関数を使用できないのはなぜですか（$ elはこれを使用して）思考エラーはどこにありますか？

4

3 に答える 3

2

問題は、が呼び出されるform: {...}前に評価さrenderれ、クエリするHTML要素がで作成されることだと思いますrender。

たぶん、レンダリング関数内の最後でこれを試みることができます：

this.form = {
            "username": $("#_user_username")
            , "email": $("#_user_email")
            , "password": $("#_user_password")
        }
于 2012-07-09T18:18:14.157 に答える
2

セレクターを正しい方法で使用していません。これを行うには、jQueryをビューにスコープする必要があります。

invalidateForm: {
  "username": this.$("#_user_username"), 
  "email": this.$("#_user_email"),
  "password": this.$("#_user_password")
},

そして、レンダリングは次のようにする必要があります。

render: function(){
  this.$el.append(Template);
  this.invalidateForm();
},

また、パフォーマンスをより効率的にするために、$（this.el）の代わりにthis。$ elを使用します。これは、ビュー要素のキャッシュバージョンです。

于 2012-07-09T19:32:06.250 に答える
1

これはコンテキストの問題です。次のようにコードを更新できます。

initialize: function(){
    _.bindAll(this, 'render', 'submit', 'valid','invalid');
    this.model = new SecurityUserModel();
    .....
}

_.bindAllについては、次のことがわかり ます。バックボーンはデフォルトで_.bindAllを実行しますか？ https://stackoverflow.com/a/6396224/1303663

編集：>>>>>>>>>>>>

申し訳ありませんが、私はあなたが何を意味するのか完全には理解していませんでした。あなたはこれを試すことができます、私はこれがあなたが望むものだと思います：

render: function(){
        $(this.el).append(Template);
        this.initform();
    },
.....
initform: function(){            
        this.form = {};
        this.form.username = $("#_user_username");
        this.form.email = $("#_user_email");
        this.form.password = $("#_user_password");
    },

その他の変更はありません

于 2012-07-09T18:12:40.130 に答える