【问题标题】:ember need to refresh browser to get the model dataember 需要刷新浏览器才能获取模型数据
【发布时间】:2015-01-29 16:27:19
【问题描述】:

我遵循 ember 指南并稍作修改以显示发布数据。我定义了一个将生成链接的帖子路由和一个带有动态段的帖子路由以显示详细信息。但是,如果我单击链接“/posts/1”,它会导航到带有 id 的发布路线。但是,除非我刷新浏览器,否则我看不到帖子的详细信息。有谁知道为什么?任何人都可以解释路由序列化钩子的作用吗?我不明白 ember 指南的解释。

车把

<script type="text/x-handlebars">
    <h2>Welcome to Ember.js</h2>

    {{outlet}}
  </script>

  <script type="text/x-handlebars" id="posts">
    <ul>
    {{#each post in model}}
      <li>{{#link-to 'post' post}}{{post.name}}{{/link-to}}</li>
    {{/each}}
    </ul>
  </script>

  <script type="text/x-handlebars" id="post">
    <ul>
    {{#each post in model}}
      <h1>{{ post.name }} - {{ post.age }}</h1>
    {{/each}}
    </ul>
  </script>

灰烬代码

App = Ember.Application.create();

App.Router.map(function() {
  this.resource('posts');
  this.resource('post', { path: '/posts/:post_id' });
});

App.PostsRoute = Ember.Route.extend({
    model: function () {
        return [{
            id: 1,
            name: 'Andy',
            age: 18
        }, {
            id: 2,
            name: 'Tom',
            age: 14
        }, {
            id: 3,
            name: 'John',
            age: 10
        }];
    }
});

App.PostRoute = Ember.Route.extend({
    model: function (params) {
        var obj = [{
            id: 1,
            name: 'Andy',
            age: 18
        }, {
            id: 2,
            name: 'Tom',
            age: 14
        }, {
            id: 3,
            name: 'John',
            age: 10
        }];
        return obj.filter(function (item) {
            return item.id === parseInt(params.post_id);
        });
    },
    serialize: function(model) {
        // this will make the URL `/posts/12` WTH is this mean????
        return { post_id: model.id };
    }
});

【问题讨论】:

  • 现在我知道序列化是做什么的了,谁能解释一下为什么我需要刷新浏览器来获取数据而不是第一次点击生成的链接?

标签: javascript ember.js handlebars.js ember-router


【解决方案1】:

我自己想出了答案。问题是 Ember 将自动生成 PostRoute 并返回单个 OBJECT,因为默认控制器将是 ObjectController。但是,我仍然尝试将对象循环为车把模板中的数组。因此,它在第一次时不起作用。

【讨论】:

    猜你喜欢
    • 2023-03-25
    • 1970-01-01
    • 1970-01-01
    • 2014-12-10
    • 2016-11-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-06-12
    相关资源
    最近更新 更多