1

私が取り組んでいる単純な backbone.js の例があります。問題は、ページの読み込み時にページに何も表示されないことです。ただし、Chrome デバッガー コンソールでは、明示的にビューを呼び出し、それが render() メソッドである場合、正しい json データで結果が画面に表示されます。

どんな助けでも本当に、本当に感謝しています!

var Clients = Backbone.Collection.extend({

    model: Client,
    url: 'api/Contacts'

});

var clients = new Clients();


var UserItemView = Backbone.View.extend({
    tagName: 'li',
    template: _.template($('#contacts-template').html()),
    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
});


var UserListView = Backbone.View.extend({
    el: $('#contacts'),

    render: function() {
        this.$el.empty();
        var self = this;

        _.each(this.collection.models, function(model) {
            self.renderItem(model);
        });
    },

    renderItem: function(item) {
        var itemView = new UserItemView({
            model: item
        });

        this.$el.append(itemView.render().el);
    }
});

index.html ページのコードは次のとおりです。

<ul id="contacts"></ul>

<script id="contacts-template" type="text/template">

    <%= FirstName %> <%= LastName %>

</script>


<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.3/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<script src="scripts/app/app.js"></script>
<script>

    $(document).ready(function () {

        alert('HI'); // I verified this alert works

        clients.fetch();

        var userListView = new UserListView({ collection: clients });

        userListView.render();

    });

</script>
4

1 に答える 1

2

すべての非同期呼び出しには、完了時にコールバックが必要です。ここでclientsは、サーバーからのデータを取得する前にコレクションを使用しようとしています。コードを次のように変更します。

$(document).ready(function () {
    alert('HI'); // I verified this alert works
    clients.fetch(
        success: function() {
            var userListView = new UserListView({ collection: clients });
            userListView.render();
        },

        error: function() {
            alert('An error has occurred');
        },
    );
});

よろしく、

于 2012-12-27T18:42:19.900 に答える