2

残りのAPIを呼び出してjsonデータをビューにレンダリングしようとしましたが、コードは次のとおりです。

var Profile = Backbone.Model.extend({       
    dataType:'jsonp',
    defaults: {
        intuitId: null,
        email: null,
        type: null      
    },  
});     
var ProfileList = Backbone.Collection.extend({      
    model: Profile,         
    url: '/v1/entities/6414256167329108895'
});     
var ProfileView = Backbone.View.extend({        
    el: "#profiles",
    template: _.template($('#profileTemplate').html()),         
    render: function() {
        _.each(this.model.models, function(profile) {
            var profileTemplate = this.template(this.model.toJSON());
            $(this.el).append(tprofileTemplate);
        }, this);
        return this;        
    }
});     
var profiles = new ProfileList();   
var profilesView = new ProfileView({model: profiles});  
profiles.fetch();
profilesView.render();

htmlファイルは次のとおりです。

<!DOCTYPE html> 
<html>
    <head> 
        <title>SPA Example</title> 
        <!-- 
            <link rel="stylesheet" type="text/css" href="src/css/reset.css" />
            <link rel="stylesheet" type="text/css" href="src/css/harmony_compiled.css" /> 
        --> 
    </head>
    <body class="harmony">
        <header>        
            <div class="title">SPA Example</div>    
        </header>
        <div id="profiles"></div>   
        <script id="profileTemplate" type="text/template"> 
            <div class="profile"> 
                <div class="info"> 
                    <div class="intuitId"> 
                        <%= intuitId %> 
                    </div> 
                    <div class="email"> 
                        <%= email %> 
                    </div> 
                    <div class="type"> 
                        <%= type %> 
                    </div> 
                </div> 
            </div> 
        </script>
    </body>
</html>

これによりエラーが発生し、render関数が正しく呼び出されずrender、REST API が JSON 応答を返す前でも関数が呼び出されます。

誰かが私がどこで間違ったのかを理解するのを手伝ってくれませんか. どんな助けでも大歓迎ですありがとう

4

1 に答える 1

1

まず、モデル属性を明示的にテンプレート関数に渡す必要があります。したがって、ビュー内の適切なコードを次のように変更します。

var ProfileView = Backbone.View.extend({        
    el: "#profiles",
    //template: _.template($('#profileTemplate').html()), REMOVED         
    render: function() {
        _.each(this.model.models, function(profile) {
            var profileTemplate = _.template($('#profileTemplate').html(), {
                  intuitId: profile.get("intuitId"),
                  email: profile.get("email"),
                  type: profile.get("type")
                });
            $(this.el).append(tprofileTemplate);
        }, this);
        return this;        
    }
});

次に、レンダー メソッドは、サーバーから返されるフェッチ応答に依存しません。上記の行が実行された直後に呼び出され、フェッチ応答を待ちません。発生しているこの動作は仕様によるものです。サーバーから応答が返された後に render を呼び出したい場合は、イベントを使用する必要があります。profilesView.render();次のようなものに置き換えることができます。

profilesView.listenTo(profiles, "sync", profilesView.render);

これは、がコレクションをprofilesViewリッスンしprofilesてフェッチを完了し、syncイベントを発生させることを意味します。これが発生するrenderと、ビューの関数が呼び出されます。

于 2013-06-30T04:17:03.307 に答える