1

私はbackbonejsとunderscorejsを初めて使用します。視聴するビデオ素材をいくつか見つけましたが、例を変更しようとすると問題が発生しました。

これが私のコードです：

<html>
<head >
    <meta charset="UTF-8">  
    <script type="text/javascript" src="javascript/jQuery.js"></script>
    <script type="text/javascript" src="javascript/underscore.js"></script>
    <script type="text/javascript" src="javascript/backbone.js"></script>

    <script type="text/template" id="list-template">
      <li><a href="<%= href %>"><%= text %></a></li>
    </script>

    <script type="text/javascript">


        model = new Backbone.Model({
            data: [
                {text: "Google", href: "google.com"},
                {text: "Facebook", href: "facebook.com"},
                {text: "Yahoo", href: "yahoo.com"}
            ]
        });


        var View = Backbone.View.extend({
            el: "#container",
            events: {
                "click button": "render"
            },
            render: function(){
                var data = this.model.get('data');
                for(var i = 0; i<data.length; i++){
                    var variables = { href: data[i].href, text: data[i].text };
                    var li = _.template( $("#list-template").html(), variables );
                    this.$el.find('ul').append(li);
                }
            }
        });

        var view = new View({ model: model });

    </script>
</head>

<body>
    <div id="container">
        <button>Load</button>
        <ul id="list">
    </ul>
    </div>
</body>

もちろんそれは機能せず、私は原因を見つけることができません。表示された場合は、初期化するのではなく、カスタムイベントでテンプレートをバインドする方法について回答またはガイドしてください。

4

1 に答える 1

5

問題は、要素がページにレンダリングされる前にJavaScriptが実行されていることです。コードを次のようにラップします$(document).ready()：

$(document).ready(function() {
    var model = new Backbone.Model({
    ....
    var view = new View({ model: model });
});
于 2013-01-10T19:45:50.810 に答える