1

我正在使用 EmberJs 并且无法弄清楚为什么以下代码不会呈现“新”模板。当我导航到 /shops 时，我会得到一个商店列表和一个链接到“/shops/new”的创建按钮，但是当我单击创建时，“新”模板不会呈现，而是与“商店”保持相同. 我可以很好地导航到每个单独的商店，只是不是新的。

应用程序.js

window.App = Ember.Application.create();

App.Router.reopen({
  location: 'history'
});

// Router
App.Router.map(function() {
  this.resource('shops', function() {
    this.route('new');
  });
  this.resource('shop', { path: '/shops/:shop_id' });
});

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

App.ShopsNewRoute = App.ShopsRoute.extend({
  model: function() {
    return App.Shop.createRecord();
  },
  setupController: function( controller, model ) {
    return this._super(),
    controller.set( 'content', model )
  }
});

App.ShopsNewController = Ember.ObjectController.extend();

// Models
App.Store = DS.Store.extend({
  revision: 11,
  adapter: DS.RESTAdapter
});

App.Shop = DS.Model.extend({
  name: DS.attr('string'),
  body: DS.attr('string'),
});

索引.html

<!DOCTYPE html>
<html>
  <head>
    <title>Ember/Rails App</title>
    <%= stylesheet_link_tag    "application", :media => "all" %>
    <%= javascript_include_tag "application" %>
    <%= csrf_meta_tags %>
  </head>
  <body>

    <script type="text/x-handlebars" data-template-name="application">
      <div class="row">
        <div class="twelve columns">
          <h1>Ordr</h1>
          <hr>
          {{outlet}}
        </div>
      </div>
    </script> 

    <script type="text/x-handlebars" data-template-name="shops/new">
      <h2>New Shop</h2>
    </script>

    <script type="text/x-handlebars" data-template-name="shops">
      {{#each shop in controller}}
        {{#linkTo "shop" shop}} {{ shop.id }}{{/linkTo}}
      {{/each}}

      {{#linkTo 'shops.new'}}Create{{/linkTo}}
    </script>


    <script type="text/x-handlebars" data-template-name="shop">
      <h2>{{name}}</h2>
      <p>{{body}}</p>
    </script>


  </body>
</html>
4

1 回答 1

5

您设置路线和模板的方式是告诉 Ember，shops.new即使您在shops.new.

如果这实际上是您想要的场景，您需要做的就是{{outlet}}在shops模板中添加一个：

<script type="text/x-handlebars" data-template-name="shops">
  {{#each shop in controller}}
    {{#linkTo "shop" shop}} {{ shop.id }}{{/linkTo}}
  {{/each}}

  {{#linkTo 'shops.new'}}Create{{/linkTo}}
  {{outlet}}
</script>

但是，如果这不是您真正想要的，并且您确实希望在过渡到 时隐藏商店列表shops.new，那么您将需要更改一些内容。

将您更改App.ShopsRoute为App.ShopsIndexRoute：

App.ShopsIndexRoute = Ember.Route.extend({
  model: function() {
    return this.store.find('shop');
  }
});

以及您的shops模板到shops/index模板：

<script type="text/x-handlebars" data-template-name="shops/index">
  {{#each shop in controller}}
    {{#linkTo "shop" shop}} {{ shop.id }}{{/linkTo}}
  {{/each}}

  {{#linkTo 'shops.new'}}Create{{/linkTo}}
</script>

这两种方法中的任何一种都可以解决您的问题，具体取决于您的意图。

于 2013-02-22T12:12:39.573 回答