Ember嵌套路线和模型无法渲染(根本)

时间:2013-08-02 21:09:19

标签: javascript ember.js handlebars.js

我可以获得"帮助主题"要呈现的标题,但没有我已定义的FIXTURES{{#each model}}中的任何内容都不会呈现。这是我第一次使用Ember,所以任何事情(几乎任何事情)都会有所帮助,因为我没有在浏览器调试器中收到任何错误消息。

App.js

App.Router.map(function () {
    this.resource('home', { path: "/Index" });
    this.resource('agents', { path: "/Agents" });
    this.resource('topics',  function() {
        this.resource('topic', {path: '/topic/:topic_id'})
    });  
    this.resource('contacts', { path: "/Contacts" });
});

App.TopicRoute = Ember.Route.extend({
    model: function () {
        return App.Topic.find();
    }
})

App.Topic = DS.Model.extend({
    title: DS.attr('string'),
    info: DS.attr('string')
});

App.Topic.FIXTURES = [{
    id: 1,
    title: "Periscope",
    info: "Periscope is a read-only application pulling information from D3."
}, {
    id: 2,
    title: "Second post",
    info: "ASP.NET MVC 4 is a framework for building scalable, standards-based web applications using well-established design patterns and the power of ASP.NET and the .NET Framework."
}, {
    id: 3,
    title: "Ember.js",
    info: "Ember.js is designed to help developers build ambitiously large web applications that are competitive with native apps."
}];

查看

                    <script type="text/x-handlebars">
                        <div class="navbar">
                            <div class="navbar-inner">                                
                            <ul id="menu">
                                <li>{{#linkTo 'home'}}Home{{/linkTo}}</li>
                                <li>{{#linkTo 'agents'}}Agents{{/linkTo}}</li>
                                <li>{{#linkTo 'topics'}}About{{/linkTo}}</li>
                                <li>{{#linkTo 'contacts'}}Contact{{/linkTo}}</li>
                            </ul>
                            </div>
                        </div>
                        {{outlet}}
                    </script>


<script type="text/x-handlebars" id="topics">
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span3">
                <table class='table'>
                <thead>
                    <tr><th>Help Topics</th></tr>
                </thead>
                {{#each model}}
                <tr><td>
                    {{#linkTo 'topic' this}}{{title}} {{/linkTo}}
                </td></tr>
                {{/each}}
                </table>
            </div>
            <div class="span9">
                {{outlet}}
            </div>
        </div>
    </div>
</script>
<script type="text/x-handlebars" id="topic">
    <h1>{{title}}</h1>

    <div class="intro">
        {{info}}
    </div>
</script>

1 个答案:

答案 0 :(得分:1)

尝试改变你的路线:

App.TopicsRoute = Ember.Route.extend({
  model: function () {
    return App.Topic.find();
});

希望它有所帮助。