2013-10-12 58 views
0

我已經嵌套資源(訂單項)和兩個插座在我渲染的一個屏幕上。ember 1.0.0 linkTo不適用於嵌套資源transitionTo不工作?

如果我點擊一個對象沒有任何反應。如果我用href替換linkTo就是同樣的問題。當我將鼠標懸停在鏈接上時,它會顯示在瀏覽器的頁腳中,而不是在地址欄中單擊時顯示。當我手動將它寫入地址欄並重新加載它工作的頁面時。我究竟做錯了什麼?

該頁面通過簡單的sinatra服務器提供。

的index.html:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <!-- Set the viewport width to device width for mobile --> 
     <meta name="viewport" content="width=device-width" /> 
     <title>Ember Starter Kit</title> 
     <!-- Included CSS Files (Compressed) --> 
     <link rel="stylesheet" href="css/foundation.css"> 
     <link rel="stylesheet" href="css/app.css"> 
    </head> 
    <body> 

     <script src="js/libs/jquery-1.9.1.js"></script> 
     <script src="js/libs/handlebars-1.0.0.js"></script> 
     <script src="js/libs/ember-1.0.0.js"></script> 
     <script src="js/app.js"></script> 
     <script type="text/x-handlebars" data-template-name="application"> 
       <h2>Welcome to MyEmberPlayGround.js</h2> 
       <hr> 
       {{outlet "left"}} 
       ------------------- 
       {{outlet "right"}} 
       </script> 

       <script type="text/x-handlebars" data-template-name="orders"> 
        <h2> list all orders</h2> 
        {{#each order in controller}} 
        <!-- 
        <a href="/#/orders/{{unbound order.id}}">{{order.name}}</a> 
        --> 
        {{#linkTo "order" order}}{{order.name}}{{/linkTo}} 
        {{/each}} 
       </script> 


       <script type="text/x-handlebars" data-template-name="order"> 
        <h2> say Hello from order </h2> 
      </script> 
     </body> 
    </html> 

這裏app.coffee

##setting up global scope to namespace root 
root = exports ? this 
root.debug = true 


App = Ember.Application.create 
    LOG_TRANSITIONS: true 
    LOG_TRANSITIONS_INTERNAL: true 
    LOG_VIEW_LOOKUPS: true 
    LOG_ACTIVE_GENERATION: true 
    LOG_BINDINGS: true 

##### 
##Generate nested Data 
##Without serverconnect 

    ##### 

App.Order = Ember.Object.extend() 
App.Item = Ember.Object.extend() 

App.orders = Em.A() 
App.items = Em.A() 

App.items.pushObject(App.Item.create("id":"1", "name":"o1_item1")) 
App.items.pushObject(App.Item.create("id":"2", "name":"o1_item2")) 
App.items.pushObject(App.Item.create("id":"3", "name":"o1_item3")) 

App.orders.pushObject(App.Order.create("id" : "1" , "name":"Object1", "items":App.items)) 

App.items.pushObject(App.Item.create("id":"1", "name":"o2_item1")) 
App.items.pushObject(App.Item.create("id":"2", "name":"o2_item2")) 
App.items.pushObject(App.Item.create("id":"3", "name":"o2_item3")) 
App.orders.pushObject(App.Order.create("id" :"2" , "name":"Object2", "items" : App.items)) 


App.Router.map -> 
     @route 'orders', path: '/' 
     @resource 'orders' , -> 
      @resource 'order', {path: ':order_id'} 


App.OrdersIndexRoute = App.OrdersRoute = Ember.Route.extend 
    #model: -> App.Order.findAll() 
    model: -> App.orders 
    setupController: (controller, model) -> 
     controller.set('content', model) 

    renderTemplate: -> 
      @.render("orders",{outlet: "left", into: "application"}) 


App.OrderIndexRoute = App.OrderRoute=Em.Route.extend 
     model:(params) -> 
      console.log params 
      App.orders[params.order_id] 
     renderTemplate: -> 
      @.render("order",{outlet: "right", into: "application"}) 

感謝任何幫助或暗示

回答

1

當你參觀了route命令鏈接將正常工作。爲了達到這個目的,你可以修改你的路線並使用IndexRoute來轉換。該代碼是純JS和咖啡提供,

JS

App.Router.map(function() { 
    this.route('orders', { 
    path: '/orders' 
    }); 
    return this.resource('orders', function() { 
    return this.resource('order', { 
     path: ':order_id' 
    }); 
    }); 
}); 

App.IndexRoute = Ember.Route.extend({ 
    redirect: function() { 
    this.transitionTo("orders"); 
    } 
}); 

咖啡

App.Router.map -> 
    @route "orders", 
    path: "/orders" 

    @resource "orders", -> 
    @resource "order", 
     path: ":order_id" 



App.IndexRoute = Ember.Route.extend(redirect: -> 
    @transitionTo "orders" 
) 

http://jsfiddle.net/59jgj/3/

你可能已經注意到了,因爲你試圖通過重新加載頁面訪問URL ,當您鏈接到訂單時,訂單出口消失。 如果您希望兩者都可見,則可以嘗試重新排列模板,即將訂單出口包含在訂單出口中。

http://jsfiddle.net/59jgj/4/

+0

感謝您的解決方案。這工作很好,是關於路由的最佳信息。不幸的是,網絡中有太多的虛假信息。你知道路由背後思想的一些好資源嗎? emberdoc不太瞭解這一點。 – user767108