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呈現錯誤的模板

回答

相關問題