Wiele gniazd w routerze Ember.js v2
Właśnie zaczynam pracę z Ember.js i jedną z rzeczy, która wydaje się obiecująca, jest pomysł, aby wiele punktów sprzedaży łączyło ze sobą wiele szablonów, tworząc złożony, ale modułowy układ.
Ale nie mogę tego zmusić. Wygląda na to, że kilka miesięcy temu (połowa 2012 r.) Pojawiło się wiele pytań, odpowiedzi i przykładów, ale w marcu do 1.0 bardzo niedawno (grudzień 2012 r. / Styczeń 2013 r.) Przepisano router na interfejs API „v2”. Dokumenty są dobre w tym, co opisują, ale pomijają duży kontekst obrazu, a ja muszę jeszcze znaleźć pojedynczy przykład.
Oto co przeczytałem:
wszystko podprzewodnik routingu (aktualne, ale nie wyczerpujące)odwołanie do interfejsu API pomocnika szablonu „outlet” (może to być nieaktualne? Każda próba nawiązania połączeniacontroller.connectOutlet() zawodzi zUncaught TypeError: Object <(generated animals.cats controller):ember170> has no method 'connectOutlet'.ogłoszenieEmber.js Router API v2. W szczególności dolne komentarze (pytanie i odpowiedź w wielu punktach sprzedaży). Tak, ten opis jest oznaczony jako „Ostrzeżenie; nieaktualny; aktualne informacje można znaleźć w przewodniku po trasowaniu”. Jednak obecny przewodnik routingu nie opisuje całkowicie zachowania. TheRenderowanie szablonu sekcja przewodnika pokazuje, jak renderować do różnych istniejących już punktów sprzedaży (i mogę to zrobić), ale nie wiem, jak połączyć dodatkowe gniazda lub utworzyć dodatkowe szablony.Co dla mnie działa:
Konfigurowanie zagnieżdżonych tras (dobrze zagnieżdżonych zasobów; nie można zagnieżdżać tras; można dostosowywać trasy dla zagnieżdżonych zasobów), a także zagnieżdżać szablony i gniazda, które są automatycznie tworzone na podstawie tras.Czego nie udało mi się ustalić, jak to osiągnąć:
Ręcznie twórz szablony i podłącz je do gniazd. Wydaje się to konieczne, jeśli chcesz korzystać z wielu punktów sprzedaży lub jeśli chcesz, aby struktura relacji między gniazdem a szablonem była inna niż trasy. (Oto przykład poniżej. Zasadniczo to, co próbuję zrobić, to użyć szablonu jako miksu, który mogę osadzić w dowolnym innym miejscu.)Rzeczą, która wydaje mi się obiecująca, ale mi się nie udaje, jest
Zastąp kontroler trasy (przedłuż trasę, używającApp.WhateverRoute = Ember.Route.extend(), zaopatrz się we własnesetupController metoda) i zadzwońcontroller.connectOutlet tutaj. To nie powiedzie się, jak opisano powyżej; obiekt kontrolera przekazany do tej metody nie maconnectOutlet metoda.Przykład (tutaj jako jsFiddle, lub poniżej jako samodzielny dokument html, który osadza CSS i skrypty oraz ładuje Ember i zależności z łączy https, więc powinieneś być w stanie po prostu zapisać w lokalnym pliku i otworzyć w przeglądarce, jeśli chcesz go wypróbować):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ember.js Router Example</title>
<style>
.outlet {
border: 1px solid black;
padding: 5px;
}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://raw.github.com/wycats/handlebars.js/1.0.rc.2/dist/handlebars.js"></script>
<script src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-pre.4.js"></script>
<script type="text/x-handlebars" data-template-name="index">
<p>Root index template. You should not see this because we redirect App.IndexRoute elsewhere.</p>
</script>
<script type="text/x-handlebars" data-template-name="about">
<p>About this demo.</p>
</script>
<script type="text/x-handlebars" data-template-name="guide">
<p>Guide to this demo.</p>
</script>
<script type="text/x-handlebars" data-template-name="animals">
<p>Animals. You have selected:</p>
<div class='outlet'>{{ outlet }}</div>
</script>
<script type="text/x-handlebars" data-template-name="animals/index">
<!-- you will not see this unless you disable App.AnimalsIndexRoute redirect. -->
<p>No animal selected.</p>
</script>
<script type="text/x-handlebars" data-template-name="animals/cats">
<p>Cat. I can meow. Like all animals, I
<span class='outlet'>{{ outlet }}</span>
</p>
</script>
<script type="text/x-handlebars" data-template-name="animals/dogs">
<p>Dog. I can bark. Like all animals, I
<span class='outlet'>{{ outlet }}</span>
</p>
</script>
<script type="text/x-handlebars" data-template-name="animal_mixin">
<p>am alive.</p>
</script>
<script type="text/x-handlebars" data-template-name="application">
<div class="container">
<p>
Select contents for my outlet:
{{#linkTo "index"}}/ (root){{/linkTo}}
{{#linkTo "about"}}/about{{/linkTo}}
{{#linkTo "guide"}}/guide{{/linkTo}}
{{#linkTo "animals"}}/animals{{/linkTo}}
{{#linkTo "animals.cats"}}/animals/cats{{/linkTo}}
{{#linkTo "animals.dogs"}}/animals/dogs{{/linkTo}}
</p>
<div class='outlet'>
{{ outlet }}
</div>
</div>
</script>
<script>
App = Ember.Application.create();
App.Router.map(function() {
this.resource("about");
this.resource("guide");
this.resource("animals", function() {
this.route("cats");
this.route("dogs");
})
});
App.IndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('about');
}
});
App.AnimalsIndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('animals.cats');
}
});
App.AnimalsCatsRoute = Ember.Route.extend({
setupController: function(controller, model) {
// BUG: this controller object has no connectOutlet method
// (uncomment to see this yourself)
// controller.connectOutlet('animal_mixin');
}
});
App.initialize();
</script>
</html>
Zasadniczo animal_mixin to fragment schematu, którego chcę używać wielokrotnie jako miksu, upuszczając go gdziekolwiek chcę, umieszczając tam wylot i łącząc go z tym szablonem. Zdaję sobie sprawę, że ten przykład jest wymyślony, ponieważ mógłbym to zrobić za pomocą „dziedziczenia” zapewnianego przez strukturę zagnieżdżania: zawartość animal_mixin może przejść bezpośrednio do szablonu „zwierzęta”, a ja nie musiałbym wspominać o tym u zwierząt / kotów i zwierzęta / psy. Byłoby dobrze, gdybym chciał go mieć we wszystkich zwierzętach, ale powiedzmy, że miałem inny podprogram / zwierzęta, których nie chcę zawierać tego fragmentu. Ponownie przykład jest wymyślony, ale mam nadzieję, że pytanie i intencja są jasne.