1

私はEmberJsを使用していますが、次のコードが「新しい」テンプレートをレンダリングしない理由を理解できません。/ shopsに移動すると、ショップのリストと「/ shops / new」にリンクする作成ボタンが表示されますが、「create」をクリックすると、「new」テンプレートはレンダリングされず、「shops」と同じままになります。 。私は個々の店にうまくナビゲートすることができますが、新しいものではありません。

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>
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>

あなたの意図に応じて、これら2つの方法のいずれかで問題を解決する必要があります。

于 2013-02-22T12:12:39.573 に答える