Views dan templates

Routes

Routes memberitahu aplikasi bahawa sebahagian kandungan/fungsi tertentu akan wujud di URL yang tertentu. Bersama-sama dengan Templates, yang menentukan struktur kandungan yang akan kelihatan di setiap route, ia membentuk asas "V" (View) di dalam MVC aplikasi-aplikasi Ember. Fikirkan route sebagai sebuah 'halaman' aplikasi anda.

Ember akan mengendalikan penjanaan dinamik kandungan yang diperlukan pada ketika masa pembinaan, dan menggunakan JavaScript, CSS, dan lain-lain. yang membuatkan kandungan tersebut berfungsi. Sebagai rumusan, route dicipta menggunakan arahan berikut:

ember generate route my-route-name

Menambah waktu semasa

Kita akan memulakan dengan menambah 'halaman' clock pada aplikasi kita, untuk memaparkan waktu semasa. Untuk mencipta halaman baru, kita perlu menjana route — jalankan arahan berikut di dalam terminal anda, pastikan anda berada di dalam direktori punca aplikasi anda:

ember generate route clock

Ini akan menjanakan:

1. app/routes/clock.js: Fail ini mengawal route
2. app/templates/clock.hbs: Templat Handlebars yang menentukan kandungan yang akan dipaparkan di URL yang dinamakan.
3. tests/unit/routes/clock-test.js : Fail ujian di mana anda boleh menetapkan ujian ke atas fungsi di route anda.

Templat clock anda sedia didapati di pelayan ujian anda di https://localhost:4200/clock (jalankan arahan ember serve sekali lagi jika ia tidak berjalan). Walaubagaimanapun, jika anda navigasikan ke URL ini, anda akan dapati yang ia memaparkan mesej sambutan yang sama seperti halaman utama kita  (https://localhost:4200). Sebaliknya, untuk memaparkan waktu semasa, kita perlu mengemaskini templat clock kita.

Templates

Terdapat pelbagai sistem template HTML yang wujud untuk aplikasi Web. Ini memberikan fungsi yang terbaik ke atas HTML biasa, seperti kebolehan untuk mempunyai pembolehubah yang dikemaskini secara dinamik apabila keadaan aplikasi atau data berubah. Seperti yang diterangkan sebelumnya di dalam siri ini, Ember menggunakan Handlebars sebagai templating.

Mengemaskini template clock kita

Fail template kita telah pun dijanakan di app/templates/clock.hbs. Bukanya di editor teks dan anda akan lihat bahawa ia akan mengandungi kenyataan berikut sahaja:

{{outlet}}

Handlebars menggunakan curly braces untuk membezakan HTML biasa dengan logik templating. Item di dalam curly braces — pada tahap biasa — adalah pembolehubah yang boleh mewakili apa-apa data yang ada mahukan. Buat masa ini, template tersebut hanya mengandungi mesej sambutan yang diprapilih; mari ubahnya untuk menambah satu pembolehubah yang akan mengeluarkan waktu semasa kita.

Gantikan {{outlet}} dengan kenyataan berikut:

<h2>Local Time: <strong>{{localTime}}</strong></h2>

Dengan membalut localTime di dalam braces, template kita dapat mengetahui untuk menggantikan perkataan localTime dengan apa-apa sahaja nilai yang kita tentukan.

Jika anda kembali ke https://localhost:4200/clock di dalam pelayar web anda, anda akan perasan bahawa halaman tersebut masih memberikan "Welcome to Ember.js", tetapi sekali dengan "Local Time:" di bawahnya. Ini disebabkan mesej sambutan tersebut datang daripada app/templates/application.hbs. Jika anda lihat di dalam fail, anda akan dapat lihat dua baris:

<h2 id="title">Welcome to Ember.js</h2>

{{outlet}}

Apabila mana-mana paparan dinavigasikan oleh pengguna aplikasi, application.hbs akan ditunjukkan, tetapi disertakan dengan kandungan paparan template sekali. Kita akan lihat lebih terperinci di bahagian seterusnya, bersama dengan bagaimana untuk menghilangkan mesej sambutan yang diprapilih.

The main application template

application.hbs is a special template created when you first created the app, which represents the main, or master application view. You are given this automatically so you'll always have something displayed at the root of your app (i.e. your-server.com/). Whenever you view any "page" in your app, it is actually the application.hbs template that is shown, but with the contents of the route's corresponding template inserted in place of the {{outlet}}. In the case of our clock route, the rendered content will be whatever exists in clock.hbs.

So far we've been viewing our app through our clock route at https://localhost:4200/clock. But since this is going to be the only/main page of the app, it'd be nice to have it appear when we go to the root of our domain.

So you've already got an application.hbs file, but that's it — you'll notice there was no application route created for you by default. Often times, you'll find that a template is all you need to render the content you want. However, if you want to do anything more sophisticated with a template, you will need to put that logic in a corresponding route.

Generating an application route

Let's generate a main application route by entering the command below in the app's root:

ember generate route application

import Ember from 'ember';

export default Ember.Route.extend({
    redirect: function() {
        this.transitionTo('clock');
    }
});

Here we are extending the default Ember Route functionality with a redirect() method that will forward any requests for the root of our application to the clock route using transitionTo(). We will now be redirected to our ticking clock at localhost:4200/clock whenever we hit https://localhost:4200/.

Adding links to different displays

In addition to showing the clock on our main page (which we'll fix in the next article!), we're going to want some navigation that allows users to toggle between the main clock view, and a view allowing them to choose new timezones to add to the main display. In our application template, let's add two links. One will correspond to our clock route, and the other will link to a timezones route that we will be creating shortly.

Update the contents of app/templates/application.hbs to look like this:

<h1 id='title'>It's 5'o'clock somewhere</h1>

<ul>
    <li>{{#link-to 'clock'}}Clock{{/link-to}}</li>
    <li>{{#link-to 'timezones'}}Manage Timezones{{/link-to}}</li>
</ul>

{{outlet}}

You'll notice the same Handlebars convention of using curly braces that we saw in our clock template. In this example, {{#link-to}} is a built-in Handlebars helper for creating links — it takes one parameter, the route you want to link to.

As we alluded to before, {{outlet}} is Ember's way of reserving a space on the page for the content a user is requesting to view. So when we click the links for our clock route or timezones route, the outlet will automatically render the content from the requested route's template.

If you go to look at your application now, you'll notice the page is blank. We've lost our "Local time:" heading. We must have an error in our code somewhere, so let's go and investigate now.

Debugging Practice

 If you open the console tab in your developer tools, you should see an error coming specifically from Ember:

This is because we are trying to link to a timezones route that does not yet exist. We'll deal with this in a later article, so for now, update the line

<li>{{#link-to 'timezones'}}Manage Timezones{{/link-to}}</li>

to simply

<li>Manage Timezones</li>

So that we can carry on. You should now see this:

Next

In order to display the current local time, we'll need to create a corresponding clock controller to define the value of the localTime variable we've got in our clock.hbs template. This will be the topic of our next article.