Question

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

App.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'),
});

的index.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>

Answer 1

您设置路线和模板的方式，您告诉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>

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

Emberjs渲染错误的模板

1 个答案: