2

我一直在尝试通过调用rest 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;        
    }
});

其次，您的渲染方法不依赖于从服务器返回的获取响应。它将在上面的行执行后立即被调用，而不是等待获取响应。您遇到的这种行为是设计使然。如果您想在从服务器获得响应后调用渲染，则必须使用事件。你可以profilesView.render();用类似的东西代替：

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

这意味着profilesView将侦听profiles集合以完成其获取并触发sync事件。发生这种情况时，render将调用视图的函数。

于 2013-06-30T04:17:03.307 回答