0

我是 EmberJs 的新手，正在关注Adam Hawkins 的这篇文章。当我尝试在浏览器中运行它时，它似乎可以工作，但不如预期。当我单击导航栏中的 dj (data-template-name="djs") 时，浏览器会导航到所选 dj 的详细信息并向我显示他的所有专辑。例如 embertest/index.html#/djs/djs/armin-van-buuren

但是，如果我直接将 url (embertest/index.html#/djs/djs/armin-van-buuren) 粘贴到浏览器中，而不首先在导航列表中单击 dj，我会从车把模板中收到“无专辑”消息“ DJ/DJ"

我希望在这两种情况下都有相同的行为。我在这里想念什么？

为了完整起见，您可以在下面找到我的 ember 应用程序和车把模板。

应用程序.js

var App = Ember.Application.create(
{   LOG_TRANSITIONS: true,
    LOG_BINDINGS: true,
    LOG_VIEW_LOOKUPS: true,
    LOG_STACKTRACE_ON_DEPRECATION: true,
    LOG_VERSION: true,
    debugMode: true
});

window.App = App;

App.DJS = [
  { 
    name: 'Armin van Buuren',
    albums: [
      { 
        name: 'A State of Trance 2006',
        cover: 'http://upload.wikimedia.org/wikipedia/en/thumb/8/87/ASOT_2006_cover.jpg/220px-ASOT_2006_cover.jpg'
      },
      { 
        name: '76',
        cover: 'http://upload.wikimedia.org/wikipedia/en/thumb/8/8a/Armin_van_Buuren-76.jpg/220px-Armin_van_Buuren-76.jpg'
      },
      { 
        name: 'Shivers',
        cover: 'http://upload.wikimedia.org/wikipedia/en/thumb/a/a1/ArminvanBuuren_Shivers.png/220px-ArminvanBuuren_Shivers.png'
      }
    ]
  },
  { 
    name: 'Markus Schulz',
    albums: [
      {
        name: 'Without You Near',
        cover: 'http://upload.wikimedia.org/wikipedia/en/9/92/Markus_Schulz_Without_You_Near_album_cover.jpg'
      },
      { 
        name: 'Progression',
        cover: 'http://upload.wikimedia.org/wikipedia/en/thumb/8/81/Markus-schulz-progression_cover.jpg/220px-Markus-schulz-progression_cover.jpg',
      },
      { 
        name: 'Do You Dream?',
        cover: 'http://upload.wikimedia.org/wikipedia/en/thumb/9/92/Doyoudream.jpg/220px-Doyoudream.jpg',
      }
    ]
  },
  { 
    name: 'Christopher Lawrence',
    albums: [
      {
        name: 'All or Nothing',
        cover: 'http://s.discogss.com/image/R-308090-1284903399.jpeg',
      },
      { 
        name: 'Un-Hooked: The Hook Sessions',
        cover: 'http://s.discogss.com/image/R-361463-1108759542.jpg'
      }
    ]
  },
  { 
    name: 'Above & Beyond',
    albums: [
      {
        name: 'Group Therapy',
        cover: 'http://s.discogss.com/image/R-2920505-1345851845-3738.jpeg'
      },
      { 
        name: 'Tri-State',
        cover: 'http://s.discogss.com/image/R-634211-1141297400.jpeg',
      },
      { 
        name: 'Tri-State Remixed',
        cover: 'http://s.discogss.com/image/R-1206917-1200735829.jpeg'
      }
    ]
  }
];

App.Router.map(function() {
  this.resource('djs', function() {
    this.route('dj', { path: '/djs/:name' });
  });
});

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

App.DjsRoute = Ember.Route.extend({
  model: function() {
    return App.DJS;
  }
});

App.DjsDjRoute = Ember.Route.extend({
  serialize: function(dj) {
    return {
      name: dj.name.dasherize()
    }
  }
});

索引.html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
<!-- application template -->
<script type="text/x-handlebars">
  <div class="navbar navbar-static-top">
    <div class="navbar-inner">
      {{#linkTo 'djs' class="brand"}}On The Decks{{/linkTo}}
    </div>
  </div>

  <div class="container-fluid">
    <div class="row-fluid">
      {{outlet}}
    </div>
  </div>
</script>

<script type="text/x-handlebars" data-template-name="djs">
  <div class="span2">
    <ul class="nav nav-list">
      {{#each controller}}
        <li>{{#linkTo 'djs.dj' this}}{{name}}{{/linkTo}}
      {{/each}}
    </ul>
  </div>
  <div class="span8">
    {{outlet}}
  </div>
</script>

<script type="text/x-handlebars" data-template-name="djs/dj">
  <h2>{{name}}</h2>

  <h3>Albums</h3>

  {{#if albums}}
    <ul class="thumbnails">
      {{#each albums}}
        <li>
          <div class="thumbnail">
            <img {{bindAttr src="cover" alt="name"}} />
          </div>
        </li>
      {{/each}}
  {{else}}
    <p>No Albums</p>
  {{/if}}
</script>

<script type="text/x-handlebars" data-template-name="djs/index">
  <p class="well">Please Select a DJ</p>
</script>

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

</body>
</html>
4

1 回答 1

1

你是对的，我试着解释你

Ember 有几种方法可以去一个 Route，这里我们有两个例子。

linkTo 助手，直接写 url。

通过 linkTo，我们为路由提供了一个模型，this关键字

{{#linkTo 'djs.dj' this}}{{name}}{{/linkTo}}

对于 url 方式，ember 路由需要知道要表示的模型，并且为此执行路由的模型钩子（在您的示例中缺少），您可以像这样定义 dj 路由。

App.DjsDjRoute = Ember.Route.extend({
  serialize: function(dj) {
    return {
      name: dj.name.dasherize()
    }
  },
  model:function(dj){
      return App.DJS.find(function(item){
          //The url param is the dasherized name
          return item.name.dasherize() == dj.name;});
  }
});

还有一个定义路由的错字this.route('dj', { path: '/djs/:name' }); 应该是this.route('dj', { path: '/:name' });

完成 JSFiddle http://fiddle.jshell.net/AM7sf/10/show/#/djs

于 2013-10-15T08:35:40.260 回答