0

以下に示す backbone.js ビューがあります。正常に動作していましたが、フォーム ボタンがクリックされたときにクリック イベントが実行されなくなりました。コンソールにエラーはなく、その他の明らかな理由の兆候も表示されません。

window.FormOptionView = Backbone.View.extend({
    template: _.template($('#test-option').html()),
    render: function (eventName) {
        $('#test1').append(this.template(this.model.toJSON()));
         $('#test2').append(this.template(this.model.toJSON()));
        return this;
    }

});


window.AddTestView = Backbone.View.extend({

    template: _.template($('#test-add').html()),

    initialize: function () {
        this.collection.bind("reset", this.render, this);
        this.render();

    },

    events: {
             "click button": "addTest" 
    },

    addTest: function(event){
        event.preventDefault();
        var test = new Test({
            test1: {
                firstName: $("#test1 option:selected").val(),
                lastName: $("#test1Score").val()
            },
            test2: {
                firstName: $("#test2 option:selected").val(),
                lastName: $("#test2Score").val()
            }
        });

        test.add(result);
        app.navigate("tests", true);

    },

    render: function (eventName) {
        $('#content').html(this.template());
        _.each(this.collection.models, function (test) {
             this.renderSelectBox(test);
        }, this);
        return this;
    },

    renderSelectBox: function (item) {
       var optionView = new FormOptionView({
           model: item
       });
       $(this.el).append(optionView.render().el);
    }
});

対応する HTML

        <script type="text/template" id="test-option">
        <option><%= firstName %> <%= lastName %></option>
    </script>

    <script type="text/template" id="test-add">

                <form id="addTest" action="#">
                        <label for="test1">Test1:</label>

                        <select id="test1">
                            <option></option>
                        </select>

                        <label for="test1Score">Score:</label>

                        <input id="test1Score" type="number" />



                        <label for="test2">Test 2:</label>

                        <select id="test2">
                            <option></option>
                        </select>

                        <label for="test2Score">Score:</label>

                        <input id="test2Score" type="number" />


                        <button id="add">Add</button>
                    </form>

           </script>
4

3 に答える 3

1

対応するHTMLが表示されない場合、私の推測では、あなた<button>はビューの範囲外にあります。クリックイベントは、ビューのルート要素の子にのみアタッチされます。

于 2012-07-18T18:23:53.633 に答える
0

すでに発見したように、あなたの問題は、ビューがel適切に処理されていないことです。

delegateビューがレンダリングされると、Backboneはビューの でjQuery を使用してイベントをフックしますthis.el。

を明示的に設定しない場合el(コンストラクター as new V({ el: ... })、ビューの定義 as el: ...、または を呼び出すことによってsetElement)は、ドキュメントに記載されているelさまざまなビュー プロパティを使用して構築されます。デフォルトは単純な. これは、空の s がどこから来ているかです。el<div><div>

あなたはこれをしていました：

render: function (eventName) {
    $('#content').html(this.template());
    _.each(this.collection.models, function (test) {
         this.renderSelectBox(test);
    }, this);
    return this;
}

他のどこかで、おそらく単純なadd_test_view.render(). その結果、イベントはビュー(空の) にdelegateバインドされ、DOM には追加されません。DOM にないものにバインドしている場合、イベントは発生しません。el<div>eldelegate

ビュー定義で言うとel: '#content'、バックボーンは#contentasを使用しel、ビューは次のようになります。

el: '#content',
//...
render: function (eventName) {
    this.$el.html(this.template());
    this.collection.each(function(test) {
        this.renderSelectBox(test);
    }, this);
    return this;
},
renderSelectBox: function (item) {
    var optionView = new FormOptionView({
        model: item
    });
    this.$el.append(optionView.render().el);
}

に切り替えることに注意してくださいthis.collection.each。バックボーン コレクションにはさまざまな Underscore メソッドが混在してcollection.modelsいるため、手動でアクセスする必要はありません。this.$elビューには既にキャッシュされた jQuery のバージョンのthis.el.

于 2012-07-18T19:19:55.883 に答える
0

Just found the views el tag corresponded to a bunch of empty <div>s. Not to sure why but a simple el: $('#content') managed to fix the problem. Thanks

于 2012-07-18T18:31:34.583 に答える