Emberjs呈现错误的模板

我正在与EmberJs合作，无法弄清楚为什么下面的代码不会呈现'新'模板。当我导航到/商店时，我得到一个商店列表和一个链接到'/ shops/new'的创建按钮，但是当我点击创建时，'新'模板不会被渲染，而是保持与'商店' 。我可以导航到每个单独的商店，只是不新。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

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

来源

2013-02-22 paulruescher

你已经设定了您的路线和模板的方式，你告诉灰烬要导航到shops.new并保留所有的即使在shops.new中时也显示商店列表。

如果这是事实，你想要的场景，所有你需要做的是shops模板中添加{{outlet}}：

<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-22 12:12:39

太棒了。第二个答案是我在找的，谢谢 – paulruescher 2013-02-24 00:05:30

Emberjs呈现错误的模板

回答

相关问题