0

私はbackbone.js、underscore.js、jQueryを使用しています。http://jsfiddle.net/thomas/C9wew/6/から次のサンプルコードを取得しました。

<!DOCTYPE html>
<html>
    <head>
        <title>backbone.js</title>
    </head>
    <body>
        <div id="search_container">
            Container
        </div>

        <script src="/js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="/js/underscore-min.js" type="text/javascript" charset="utf-8"></script>
        <script src="/js/backbone-min.js" type="text/javascript" charset="utf-8"></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'>
            //<![CDATA[
            $(window).load(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);
                        this.el.innerHTML = template;
                    },
                    events : {
                        "click input[type=button]" : "doSearch"
                    },
                    doSearch : function(event) {
                        // Button clicked, you can access the element that was clicked with event.currentTarget
                        alert("Search for " + $("#search_input").val());
                    }
                });

                var search_view = new SearchView({
                    el : $("#search_container")
                });

            });
            //]]>

        </script>
    </body>
</html>

「el」はjQueryセレクター$( "#search_container")を介して選択されるため、jQueryでラップされた要素であると期待していますが、html()のような関数がないためではありません。

「el:$( "#search_container")」の行にブレークポイントを設定すると、「el」要素には関数html()があり、これは通常の動作です。レンダリング関数が呼び出されると、「el」要素にはhtml()関数がなくなります。

4

1 に答える 1

0

リンクした例は、古いバージョンのバックボーン(0.3.3)に基づいています。サンプルでは、​​おそらく最新バージョン(0.9.2)を使用しています。ここthis.elで、はDOM要素であり、this.$elはに関連付けられたキャッシュされたjQuery|Zepto要素this.elです。

つまり、このhtmlメソッドを使用する場合は、を使用しますthis.$el.html(template)。更新された例については、このFiddlehttp ://jsfiddle.net/gFcRR/1/を確認してください。

于 2012-05-15T10:11:06.877 に答える