Question

我一直试图通过调用将json数据呈现给视图其余的api和代码如下：

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函数没有调用正确地，甚至在REST之前调用render函数 API返回JSON响应。

有人可以帮我弄清楚我哪里出错了。任何帮助都非常感谢谢谢

Answer 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方法不依赖于从服务器返回的fetch响应。它将在它上面的行执行后立即被调用，而不是等待获取响应。您遇到的这种行为是设计的。如果要在从服务器获得响应后调用render，则必须使用事件。您可以使用以下内容替换profilesView.render();：

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

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

json数据未在骨干视图中呈现

1 个答案: