В Ember ресурс и маршрут являются маршруты. У них есть два имени, чтобы Эмбер мог различать, что такое ресурс и маршрут. Честно говоря, чтобы помнить, что они оба маршрута, и чтобы сохранить свое здравомыслие, вы можете ссылаться на них, соответственно, как «маршрут ресурсов» и «маршрут». Ресурс может быть вложен и иметь дочерние ресурсы или маршруты, вложенные в них. С другой стороны, маршруты не могут вложить ничего.
УстановитеEmber инспектор, если вы не используете его. Это расширение хром и поможет вам с маршрутами, контроллерами, шаблонами, данными и другими вещами с Ember, которые вы устанавливаете в веб-браузер Chrome. Последнее, что я слышал, Ember Inspector доступно в средствах FireFox Dev Tools. https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi?hl=en
Итак, если у вас есть ресурс, вы можете вложить ресурс и маршрут. Вложенные ресурсы сохранят пространство имен, маршруты будут добавлены к вложенному пространству имен. Помните, что вы не можете вложить ничего в маршрут.
App.Router.map(function() {
//creating a resource
this.resource('foo', {path: 'somePathYouPut'}, function() {
//nesting stuff inside of the resource above
//could open another nest level here in bar if you want
this.resource('bar');
//can not nest in route. Sad face. Sorry
this.route('zoo');
});
});
Поскольку вы не можете вкладывать ничего в маршрут вашего {{}} на выходе в index шаблон не имеет каких-либо детей искать и по умолчанию и рендеринга в том, что {{}} на выходе. Я считаю, что это то, что, по вашему мнению, произойдет.
<script type="text/x-handlebars" data-template-name="index">
<div class="wrap">
<div class="bar">
{{input type="text" class="search"
placeholder="Where is my bookmark??" value=search action="query"}}
<div class="bar-buttons">
<button {{action "addNote"}}> NEW </button>
</div>
</div>
{{outlet}}
</div>
</script>
В своем коде вы сослались на index в качестве ресурса, его маршрут.Поскольку индекс является маршрутом, помните, что вы не можете вставлять элементы в маршрут, ваш код должен выглядеть более похожим. Также может быть удален и ваш resource 'новый' путь /.
Notes.Router.map(function() {
//this is a route not a resource you had it as resource
//and tried to nest in your code
this.route('index', { path: '/' });
this.resource('list', {path: ':note_title'});
this.resource('new');
this.resource('note', { path: ':note_id' });
});
Вы получаете index на каждом вложенном уровне, начиная с самого верхнего уровня, который исходит от уровня приложений, но вы не должны явно определить их в маршрутизаторе они просто есть. Маршрут index, который вы получаете бесплатно на каждом вложенном уровне, по умолчанию связан с его непосредственным родителем и рендерингом в родительскую розетку. Вы могли бы подумать, что Маршрут выглядит примерно так.
Только для иллюстративных целей:
Notes.Router.map(function() {
//think of this as your application level stuff that Ember just does!!
//this is not written like this but to illustrate what is going on
//you would get application template, ApplicationRoute, ApplicationController
this.resource('application', function() {
//this is an index that you get for free cause its nested
//its that index template, IndexController, and IndexRoute you were using
this.route('index', { path: '/' });
this.resource('foo', {path: 'somePathYouPutHere' }, function() {
//since you started another nested level surprise you get another `index`
//but this one is `foo/index` template.
this.route('index', {path: '/'});
this.route('zoo');
});
});
});
Первая часть приведенного выше примера преувеличенной маршрутизатор, угасающий делает автоматически за кадром, его часть «магии» вы слышите о. Он делает две вещи: он устанавливает среду приложения для себя, и вы получаете ApplicationRoute, ApplicationController и шаблон application, которые всегда там за сценой. Во-вторых, это делает index, и вы получаете IndexController, IndexRoute и шаблон index, который вы можете использовать или игнорировать. Поэтому, если вы ничего не делаете, никакого другого кода, объявляющего и Ember App, в файл, например var App = Ember.Application.create();, и не открывайте инспектор Ember, и посмотрите на маршруты, вы увидите вышеупомянутые активы.
Теперь ресурс foo в приведенном выше маршрутизаторе является примером ресурса, который вы бы сделали, и, как видите, вы получаете index там, потому что вы начали гнездиться. Как уже упоминалось выше, вам не нужно определять индекс на каждом уровне гнезда, this.route('index', {path: '/'}); изнутри foo может быть полностью опущен, и Эмбер по-прежнему будет делать то же самое. Вы будете в конечном итоге с foo/index шаблоном, FooIndexRoute, FooIndexController вместе с ожидаемым foo шаблона, FooRoute и FooController . You can think of the Foo index as a place that says 'hey' before anything else gets rolled into my parent Foo` и визуализируется я могу показать что-то, если вы хотите использовать меня.
Это также хорошее время, чтобы подчеркнуть, что происходит с пространством имен, когда вы вложили маршрут в ресурс, например, this.route('zoo') в приведенном выше примере. Пространство имен маршрута zoo теперь будет добавлено к ресурсу foo, и вы получите foo/zoo шаблон, FooZooRoute и FooZooController.
Если вы хотите изменить зоопарк на ресурс, вложенный в ресурс foo this.resource('zoo');, пространство имен будет храниться в зоопарке. В итоге вы получите шаблон «zoo», ZooRoute и ZooController. Пространство имен сохраняется. Хорошо, достаточно, чтобы отслеживать, как насчет вашего приложения.
Вы сказали, что хотите использовать / URL вашего приложения, чтобы отобразить list template. Для этого вам необходимо переопределить поведение по умолчанию, которое происходит при загрузке Ember. Вы переопределяете верхний уровень /, добавляя {path: '/'} к первому ресурсу или маршруту в маршрутизаторе. Из кода фальшивого маршрутизатора выше первого маршрута index, который вы получаете, ассоциируется с приложением. По умолчанию, если вы ничего не делаете, Ember нажимает этот шаблон index в шаблон application. Однако это не то, что вы хотите, чтобы ваш шаблон list был добавлен в шаблон приложения, когда вы набрали базовый URL-адрес / 'для вашего приложения.
Notes.Router.map(function() {
this.resource('list', {path: '/'});
this.resource('new');
this.resource('note', { path: ':note_id' });
});
Добавляя код {path: '/'} к первому ресурсу, как я сделал выше, вы теперь говорить Ember «эй», когда мое приложение URL достигает базовый URL в / или при загрузке использовать свой список шаблон не ваш по умолчанию index шаблон и визуализировать его в шаблоне приложения. Кроме того, поскольку другие ресурсы не вложены, когда ваше приложение переходит на эти маршруты по URL-адресу, они продувают содержимое шаблона приложения {{outlet}} и заменяют его там.
Вы упомянули об определении «пути» в маршруте, что это значит, говорит Ember, как вы хотите представить этот маршрут в URL-адресе. В приведенном выше примере, если вы оставите новый ресурс как есть, Ember по умолчанию будет использовать имя маршрута в качестве пути, url будет /new. Вы можете поместить любое имя в путь для нового ресурса, this.resource(new, {path :'emberMakesMeKingOfWorld'});, и это имя будет представлено в URL-адресе как /emberMakesMeKingOfWorld, и эта длинная вещь все равно будет связана с вами новым маршрутом. Ваш пользователь может смутить то, что означает этот URL-адрес, но за его пределами вы бы знали, что он связан с вашим новым маршрутом. Это всего лишь пример, но, вероятно, хорошая практика использования описательных имен, чтобы ваш пользователь знал, что нужно делать с URL-адресом в вашем приложении.
После переопределения шаблона по умолчанию index, связанного с приложением. Я переместил ваш код в шаблон приложения. Причиной этого было то, что вы хотели, чтобы этот бар с действием «newNote» присутствовал все время. Если вы хотите, чтобы что-то присутствовало все время в вашем приложении, например, на панели навигации, нижний колонтитул, я уверен, что вы можете думать о лучшем материале, поместить его в шаблон приложения.
Вот JSBIN и я настроил ваш код немного
http://jsbin.com/oWeLuvo/8
Я надеюсь, что это помогает Счастливые кодирования.
Хорошо, если для работы мы имеем в виду ошибки, да работает, но это не то, что я увижу. Я бы увидела по крайней мере 2 шаблона на моей «домашней странице», и они должны меняться всякий раз, когда пользователь нажимает ссылку на одну заметку. –