Question

我是EmberJs的新手，正在关注Adam Hawkins的this帖子。当我试图在浏览器中运行它时，它似乎工作但不是预期的。当我单击导航栏中的dj（data-template-name =“djs”）时，浏览器会导航到所选dj的详细信息并向我显示他的所有相册。例如embertest / index.html中＃/的DJ /的DJ /阿明-VAN-布伦

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

我希望两个场景都有相同的行为。我在这里缺少什么？

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

app.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()
    }
  }
});

的index.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>

Answer 1

你很严谨，我试着向你解释

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

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

直接使用url时Emberjs无法正常工作

1 个答案: