Bagaimana untuk mencipta templat bar hendal bara?-tutorial css-php.cn

Bagaimana untuk mencipta templat bar hendal bara?

PHPz

Lepaskan： 2023-09-19 10:09:03

ke hadapan

1427 orang telah melayarinya

如何创建 ember 车把模板？

Ember.js ialah rangka kerja berasaskan JavaScript yang digunakan secara meluas untuk membina aplikasi web yang kompleks. Rangka kerja ini membolehkan pembangun mencipta aplikasi web satu halaman boleh skala hanya dengan menggunakan beberapa simpulan bahasa lazim, amalan terbaik dan corak daripada corak ekosistem aplikasi satu halaman lain dalam rangka kerja.

Sistem templat bar hendal ialah salah satu ciri utamanya, menyediakan cara yang mudah tetapi berkuasa untuk mencipta halaman web dinamik. Dalam artikel ini kita akan belajar cara membuat templat bar hendal bara.

Apakah templat dalam Ember?

Templat Ember digunakan untuk menentukan antara muka pengguna (UI) aplikasi web. Templat ditulis menggunakan sintaks Handbars, bahasa templat mudah untuk mencipta halaman HTML dinamik dengan membenamkan data dalam teg HTML.

Templat Ember js menggunakan gabungan HTML dan mengendalikan sintaks untuk mencipta antara muka pengguna yang bertindak balas terhadap perubahan data. Ini termasuk logik seperti syarat, gelung dan sifat yang dikira, membenarkan pembangun mencipta UI yang kompleks dan dinamik dengan kod yang lebih sedikit.

Ia distrukturkan sebagai hierarki komponen, di mana setiap komponen mewakili bahagian tertentu UI. Komponen ini boleh termasuk komponen lain untuk membenarkan struktur yang kompleks dan bersarang. Komponen yang diberikan menjana HTML berdasarkan templatnya dan sebarang data atau parameter yang dihantar kepadanya.

Apakah templat hendal dalam Ember?

Bar hendal ialah bahasa templat yang popular untuk mencipta halaman HTML dinamik. Ia menyediakan sintaks mudah untuk membenamkan data ke dalam penanda HTML, membolehkan pembangun mencipta antara muka pengguna yang dinamik dan responsif dengan pengekodan yang minimum.

Dalam Handlebars, templat ditakrifkan menggunakan gabungan tag HTML dan ungkapan Handlebars. Ungkapan bar hendal disertakan dalam pendakap kerinting berganda ({{ }}) dan boleh digunakan untuk memaparkan data, mengulangi senarai dan memaparkan kandungan secara bersyarat.

<ul>
   {{#each items as |item|}}
      <li>{{item}}</li>
   {{/each}}
</ul>

Salin selepas log masuk

Dalam templat ini, ungkapan {{#each}} digunakan untuk mengulangi senarai item dan ungkapan {{item}} digunakan untuk memaparkan setiap item dalam item senarai (

Ungkapan dalam Templat Bar Hendal

Ekspresi digunakan untuk membenamkan kandungan dinamik ke dalam HTML. Ia disertakan dalam pendakap kerinting {{}} dan mungkin mengandungi pembolehubah, fungsi pembantu dan pernyataan bersyarat.

Andaikan kita mempunyai pembolehubah yang dipanggil "nama keluarga" yang mengandungi nilai rentetan "Dunia" dan kita mahu memaparkannya dalam templat Handlebars, maka kita boleh menggunakan ungkapan berikut -

<h1>Hello, {{last-name}}!</h1>

Salin selepas log masuk

Langkah-langkah untuk Mencipta Templat Bar Hendal Ember

Untuk mencipta templat bar hendal bara, terdapat beberapa langkah untuk diikuti. Mari kita lalui langkah-langkah secara terperinci satu demi satu.

Langkah 1: Buat Projek Ember

Langkah pertama dalam mencipta templat Ember Handlebars ialah menyediakan projek Ember.js. Cuma ikut langkah ini untuk melakukannya -

Pasang Ember

npm install -g ember-cli

Salin selepas log masuk

Buat apl baharu

ember new ember-quickstart --lang en

Salin selepas log masuk

Jalankan pelayan

cd ember-quickstart
ember serve

Salin selepas log masuk

Langkah 2: Buat templat bar hendal baharu

Anda telah mencipta projek bara, kini tiba masanya untuk mencipta templat bar hendal baharu.

Sila ambil perhatian bahawa templat bar hendal mempunyai sambungan fail .hbs dan biasanya disimpan dalam direktori apl/templat projek Ember.js.

Sekarang pergi ke Aplikasi/Templat dan buat fail templat Bar Hendal baharu, cuma buat fail baharu dengan sambungan fail .hbs. Katakan kita mencipta fail yang dipanggil my-template.hbs.

Langkah 3: Tentukan templat

Langkah seterusnya ialah untuk menentukan templat bar hendal dan menambah beberapa kandungan padanya. Seperti yang dinyatakan sebelum ini, templat bar hendal menggunakan sintaks mudah untuk menentukan kandungan dinamik. Berikut ialah contoh templat Handlebars asas -

<div class="my-new-template">
   <h1>{{firstname}}</h1>
   <p>{{lastname}}</p>
</div>

Salin selepas log masuk

Dalam kod di atas, templat Handlebars ditakrifkan menggunakan elemen div dengan kelas "my-new-template". Di sini, di dalam div, kami telah menentukan dua elemen dinamik dengan bantuan sintaks Handlebars. Yang pertama ialah elemen h1 dengan teks {{firstname}} dan yang kedua ialah elemen p dengan teks {{lastname}}.

Jika anda tidak menggunakan alat binaan maka anda hanya boleh menentukan templat aplikasi anda dalam HTML menggunakan tag skrip, lihat di bawah -

<html>
<body>
   <script type="text/x-handlebars">
      <strong>{{firstname}}, {{lastname}}</strong>!
   </script>
</body>
</html>

Salin selepas log masuk

Langkah 4: Gunakan templat yang ditetapkan

Selepas menentukan templat Handlebars, anda boleh menggunakannya dalam aplikasi Ember.js anda. Untuk melakukan ini, anda perlu membuat laluan dan pengawal yang sepadan untuk memaparkan templat.

Berikut ialah contoh cara membuat laluan dan pengawal menggunakan templat Handlebars templat-baru saya -

// app/routes/my-route.js
import Route from '@ember/routing/route';
export default class MyRoute extends Route {
   model() {
      return {
         firstname: ‘Hello’,
         lastname: ‘World’
      };
   }
}
// app/controllers/my-controller.js
import Controller from '@ember/controller';
export default class MyController extends Controller {
}

Salin selepas log masuk

Dalam contoh ini, kelas MyRoute mentakrifkan kaedah model yang mengembalikan objek dengan sifat tajuk dan badan. Kelas MyController kosong, tetapi ia secara automatik memaparkan templat Handlebars templat saya-baharu kerana namanya sepadan dengan nama laluan.

Langkah 5: Buat templat

Langkah terakhir ialah memberikan templat dalam aplikasi anda. Untuk melakukan ini, anda perlu menambah saluran keluar templat pada fail templat utama aplikasi anda. Berikut ialah contoh cara melakukan ini -

<!-- app/templates/application.hbs -->
<div class="container">
   {{outlet}}
</div>

Salin selepas log masuk

在此示例中，主应用程序模板文件定义了一个“container”类的 div 元素。 div 内部有一个模板出口，当 MyRoute 处于活动状态时，它将渲染 my-new-template Handlebars 模板。

输出

Hello, World!

Salin selepas log masuk

结论

Handlebars 模板是 Ember.js 的重要组件，它使开发人员能够以最少的代码和精力开发动态且适应性强的 UI。它使用 HTML 和 Handlebars 表达式的组合来建立可以响应数据更改的模板。在本文中，我们学习了创建 ember 车把模板的步骤。首先，我们建立一个 Ember 项目，然后生成一个新的车把模板，定义模板，使用定义的模板，最后在我们的应用程序中渲染模板。借助 Ember Handlebars 模板，我们可以轻松为其 Web 应用程序构建复杂且动态的 UI。

Atas ialah kandungan terperinci Bagaimana untuk mencipta templat bar hendal bara?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!