Emberjs не работает при непосредственном использовании url

Я новичок в EmberJs и следил за сообщением this от Adam Hawkins. Когда я пытался запустить это в браузере, он работает, но не так, как ожидалось. когда я нажимаю dj на панели навигации (data-template-name = "djs"), браузер переходит к деталям выбранного dj и показывает мне все его альбомы. например embertest/index.html #/djs/djs/armin-van-buurenEmberjs не работает при непосредственном использовании url

Но если я вставляю url (embertest/index.html #/djs/djs/armin-van-buuren) прямо в браузере без нажатия a dj first в списке навигации Я получаю сообщение «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>

источник

2013-10-15 ghost

Вы Rigth, я пытаюсь объяснить вам

Ember имеет severals пути пойти в маршрут , здесь мы имеем два примера.

linkTo helper, и непосредственно писать URL.

С linkTo мы предоставляем модель для маршрута, это ключевое слово

{{#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', {путь: '/ DJS /: Имя'}); должно быть this.route ('dj', {путь: '/: name'});

Полный JSFiddle http://fiddle.jshell.net/AM7sf/10/show/#/djs

источник

2013-10-15 08:35:40 Edu

Emberjs не работает при непосредственном использовании url

ответ

Смежные вопросы