0

私は現在 backbone.js を学習していますが、まだ最初の段階ですが、エラーが発生しています:

Uncaught TypeError: Cannot call method 'html' of undefined

行this.$el.html( template );

<body>
                <div id="search_container"></div>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
                <script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
                <script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"></script>
                <script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
                <script type="text/template" id="search_template">
                        <label>Search</label>
                        <input type="text" id="search_input" />
                        <input type="button" id="search_button" value="Search" />
                </script>
                <script type="text/javascript">
                        $(document).ready(function()
                        {

                                SearchView = Backbone.View.extend({
                                initialize: function(){
                                        this.render();
                                },
                                render: function(){
                                        // Compile the template using underscore
                                        var template = _.template( $("#search_template").html(), {});
                                        // Load the compiled HTML into the Backbone "el"
                                        this.$el.html( template );
                                }
                                });

                                var search_view = new SearchView({ el: $("#search_container") });
                        });
                </script>
        </body>

なぜこのエラーが発生するのですか?

4

2 に答える 2

-1

JavaScript コードで DOM 要素を参照する場合、その要素は既に使用可能である必要があります。JS コードは、この要素の作成後に実行する必要があります。ここで#search_container、ビューのフィールドに割り当てた divelは、スクリプトの実行後に作成されます。このような問題を回避するには、jQuery のready方法を使用します。

$(document).ready(function()
{
    SearchView = Backbone.View.extend({

        // ...

    });

    // ...
});

このメソッドは、HTML ドキュメントが作成され、すべての要素が使用可能になった後に、引数として渡された関数を実行します。

$elまた、使用しているバックボーンのバージョンは、プロパティの値を自動的に管理していないようです。このバージョンを使用する必要がある場合は、次のinitializeようにメソッドを更新します。

initialize: function()
{                                  
    this.$el = $(this.el);
    this.render();
},

これにより、手動で$el目的の値に設定されます。

于 2013-05-20T00:18:58.797 に答える