0

我在渲染到的一个屏幕上嵌套了资源（订单项）和两个出口。

如果我单击一个对象，则不会发生任何事情。如果我将 linkTo 替换为 href ，则会出现同样的问题。当我将鼠标悬停在链接上时，它会显示在浏览器的页脚中，但在地址栏中单击时不会显示。当我在地址栏中手动写入并重新加载页面时，它可以工作。我究竟做错了什么？

该页面通过一个简单的 sinatra 服务器提供。

索引.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"})

感谢任何帮助或提示

4

1 回答 1

1

当您访问路线订单时，这些链接将起作用。为了实现这一点，您可以修改您的路线并使用 IndexRoute 进行转换。代码以纯js和coffee提供，

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/

于 2013-10-12T14:30:53.857 回答