2013-02-22 3 views
1

EmberJs와 협력 중이며 다음 코드가 '새'템플릿을 렌더링하지 않는 이유를 알 수 없습니다./shop으로 이동하면 상점 목록과 '/ shops/new'에 연결되는 버튼을 만들지 만 create를 클릭하면 'new'템플릿이 렌더링되지 않고 'shops'와 동일하게 유지됩니다. . 나는 새로운 상점이 아니라 각각의 상점을 탐색 할 수있다.Emberjs가 잘못된 템플릿을 렌더링합니다.

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을 당신이 shops.new로 이동하고 유지하려면 당신의 경로와 템플릿을 설정하는 방법, 당신은 엠버을 말하고있다

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

답변

5

모든 귀하가있는 동안에도 게재되는 상점 목록 shops.new. 당신은 실제로 당신이 정말 무슨 의도하지 않은 경우,

<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 템플릿 내부에 {{outlet}}를 추가한다 shops.new으로 전환 할 때 상점 목록을 숨기고 싶다면 두 가지를 변경해야합니다.

변경

당신의 App.ShopsRouteApp.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> 

그 두 방법 중 하나를 당신의 의도가 무엇인지에 따라 문제를 해결해야한다.

+0

멋진. 두 번째 대답은 제가 찾고 있던 것입니다. 감사합니다. – paulruescher

관련 문제