0

すべてのサブビューをレンダリングするある種の ViewCollection があります。

define(
    ['jquery', 'underscore', 'backbone', 'text!templates/main/layout.html', 'text!templates/main/index.html', 'views/security/login', 'views/security/registration'], 
    function($, _, Backbone, LayoutTemplate, ContentTemplate, LoginView, RegistrationView) {

    var IndexView = Backbone.View.extend({

        tagName: "div",

        className: "container",

        template: LayoutTemplate,

        render: function() {
            this.$el.html(LayoutTemplate);

            this.$('div.content').html(ContentTemplate);
            this.$('div.sidebar').append(new LoginView().render().el);
            this.$('div.sidebar').append(new RegistrationView().render().el);

            return this;
        }

    });

    return IndexView;

});

これはかなりうまくいきます！残念ながら、たとえば LoginView がイベントを処理できなくなっていることに気付きました。

define(
    ['jquery', 'underscore', 'backbone', 'text!templates/security/login.html'], 
    function($, _, Backbone, LoginTemplate){

    var LoginView = Backbone.View.extend({

        tagName: "form",

        className: "login well",

        template: LoginTemplate,

        events: {
            "submit form.login": "submit" 
        },

        render: function(){
            this.$el.html(this.template);

            return this;
        },

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

            var credentials = {
                'username': $(e.target[1]).val()
                , 'password': $(e.target[2]).val()
            };

            console.log(JSON.stringify(credentials));

            $.ajax({
                url: '/session'
                , type: 'POST'
                , contentType: 'application/json'
                , data: JSON.stringify(credentials)
                , success: function() {
                    window.Router.navigate('node', { trigger: true });
                }
                , error: function(xhr, status, error) {
                    console.log([xhr, status, error]);
                    $(e.target[1]).closest('div.control-group').addClass('error');
                    $(e.target[2]).closest('div.control-group').addClass('error');
                }
            });
        }
    });

    return LoginView;

});

ajax 呼び出しを送信する代わりに、ブラウザーは GET 要求として URL エンコードされたフォーム データを送信しようとします。

ビューイベントを要素に再バインドする方法はありますか?

login.html

<fieldset>
    <legend>login</legend>
    <div class="control-group">
        <label class="control-label" for="_session_username">username:</label>
        <div class="controls">
            <input type="text" id="_session_username" name="session[username]" placeholder="george78" />
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="_session_password">password:</label>
        <div class="controls">
            <input type="password" id="_session_password" name="session[password]" placeholder="••••••" />
        </div>
    </div>
    <button type="submit" class="btn btn-primary">login</button>
</fieldset>

フォーム タグは、ビューでも .login クラス属性で定義されます。

4

1 に答える 1

1

私は解決策を見つけました。

スコーピングの問題があります。ビュー（tagName： "form"）でフォームを直接定義したため、最上位のオブジェクトは"form.login"です。しかし、これはもはやセレクターを介して対処することはできません。子オブジェクトのみを選択できます。（バックボーンの内部を参照してください）。

前：

    events: {
        'keyup form.login input': 'checkInput'
        , 'submit form.login': 'submit'
    },

後：

    events: {
        'keyup input': 'checkInput'
        , 'submit': 'submit'
    },
于 2012-07-25T18:28:24.240 に答える