Question

我在一个屏幕上嵌套了资源（订单商品）和两个商店，我将其呈现给。

如果我点击一个对象没有任何反应。如果我用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"})

感谢任何帮助或提示

Answer 1

当您访问路线订单时，链接将起作用。为了实现此目的，您可以修改路线并使用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/

您可能已经注意到，因为您尝试通过重新加载页面来访问网址，所以当您链接到订单时订单出口就会消失。如果您希望两者都可见，您可以尝试重新排列模板，即在订单出口中包含订单出口。

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

ember 1.0.0 linkTo无法使用嵌套资源transitionTo无法正常工作？

1 个答案: