Emberjs 在直接使用 url 时不起作用

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

但是，如果我直接在浏览器中粘贴网址（embertest/index.html#/djs/djs/armin-van-buuren），而没有先单击导航列表中的dj，我会从车把模板"djs/dj"收到消息"No Albums"

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

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

应用.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>

你很严谨，我试着解释你

Ember 有几种通往路线的方法，这里我们有两个例子。

链接到帮助程序，并直接写入 url。

通过链接，我们提供了路由的模型，这个关键字

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

对于 url 方式，余烬路由需要知道要表示的模型，为此执行路由的模型钩子（在您的示例中缺少），您可以像这样定义 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

相关内容

最新更新

热门标签：