Question

我试着理解Ember是如何工作的，我有一个我无法理解的问题。我正在按照教程（guides.emberjs.com/v1.10.0/）进行操作，我不明白为什么当我点击（而且不能使用直接链接）。

我认为一些截图有助于理解我的问题。

这是我访问时所拥有的＆＃34; index.html＃/ posts / 1 ＆＃34;。没有文章显示。

http://i.stack.imgur.com/qzwlq.png

这是我访问时所拥有的＆＃34; index.html＃/ posts ＆＃34;然后单击左侧的 Rails is Omakase 。显示一篇文章，而我的浏览器上的链接是＆＃34; index.html＃/ posts / 1 ＆＃34; （当我刷新时，显示任何内容）。

http://i.stack.imgur.com/YpmzX.png

这是我的 index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Blog tuto</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css">
</head>
<body>
  <script type="text/x-handlebars">
    <div class="navbar">
      <div class="navbar-inner">
        <a class="brand" href="#">Bloggr</a>
        <ul class="nav">
          <li>{{#link-to "posts.index"}}Posts{{/link-to}}</li>
          <li>{{#link-to "about"}}About{{/link-to}}</li>
        </ul>
      </div>
    </div>
    {{outlet}}
  </script>

  <script type="text/x-handlebars" id="about">
    <p>
      Lorem ipsum about
    </p>
  </script>

  <script type="text/x-handlebars" id="posts">
    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span4">
          <table class="table">
            <thead>
              <tr><th>Recent Posts</th></tr>
            </thead>
            {{#each post in model}}
            <tr>
              {{#link-to "posts.post" post}}
              <td>{{post.title}} <small class="muted">by {{post.author}}</small></td>
              {{/link-to}}
            </tr>
            {{/each}}
          </table>
        </div>
        <div class="span8">
          {{outlet}}
        </div>
      </div>
    </div>
  </script>

  <script type="text/x-handlebars" id="posts/post">
    {{#if isEditing}}
      {{partial "post/edit"}}
      <button {{action "doneEditing"}}>Done</button>
    {{else}}
      <button {{action "edit"}}>Edit</button>
    {{/if}}
    <h1>{{title}}</h1>
    <h2><small class="muted">by {{author}}</small></h2>
    <hr>
    <div class="intro">
      {{exerpt}}
    </div>
    <div class="below-the-fold">
      {{body}}
    </div>
  </script>

  <script type="text/x-handlebars" id="post/edit">
    <p>{{input type="text" value=title}}</p>
    <p>{{input type="text" value=exerpt}}</p>
    <p>{{textarea value=body}}</p>
  </script>

  <script src="../js/libs/jquery.min.js"></script>
  <script src="../js/libs/handlebars.js"></script>
  <script src="../js/libs/ember.js"></script>
  <script src="../js/libs/ember-data.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.1.0/moment.min.js"></script>

  <script src="app.js"></script>
</body>
</html>

app.js

App = Ember.Application.create();

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

});

App.PostsRoute = Ember.Route.extend({
    model: function () {
        return posts;
    }
});

App.PostsPostRoute = Ember.Route.extend({
    model: function (params) {
        return posts.findBy('id', params.post_id);
    }
});

App.PostsPostController = Ember.ObjectController.extend({
    isEditing: false,

    actions: {
        edit: function () {
            this.set('isEditing', true);
        },
        doneEditing: function () {
            this.set('isEditing', false);
        }
    }
});


var posts = [{
    id: 1,
    title: "Rails is Omakase",
    author: "mc100s",
    date: new Date('08-06-2015'),
    exerpt: "Lorem ipsum dolor sit amet",
    body: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}, {
    id: 2,
    title: "The Parley Letter",
    author: "mc100s",
    date: new Date('08-06-2015'),
    exerpt: "Duis aute irure dolor in reprehenderit",
    body: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}];

感谢您的帮助

Answer 1

当您点击链接时，模型将直接传递到路线，并且不会触发路线model挂钩，因此您会看到文章。当您重新加载路由model时，会触发挂钩并出现问题。

创建字符串id，因为params.post_id是String。

findBy是Ember.Array方法。 http://emberjs.com/api/classes/Ember.Array.html#method_findBy 我会尝试：

var posts = Ember.A([{
  // as is
}]);

接下来将ObjectController更改为Controller（不推荐使用ObjectController）并在模板中使用{{model.title}}而不是{{title}}：

<script type="text/x-handlebars" id="posts/post">
  {{#if isEditing}}
    {{partial "post/edit"}}
    <button {{action "doneEditing"}}>Done</button>
  {{else}}
    <button {{action "edit"}}>Edit</button>
  {{/if}}
  <h1>{{model.title}}</h1>
  <h2><small class="muted">by {{model.author}}</small></h2>
  <hr>
  <div class="intro">
    {{model.exerpt}}
  </div>
  <div class="below-the-fold">
    {{model.body}}
  </div>

在这里工作jsbin：http://jsbin.com/pozabixeka/edit?html,js,output

了解灰烬路线和模型

1 个答案: