Pengenalan Misai

1. Gambaran keseluruhan

Dalam artikel ini, kita akan memfokuskan pada template Kumis dan menggunakan salah satu API Java-nya untuk menghasilkan kandungan HTML dinamis.

Misai adalah mesin templat tanpa logik untuk membuat kandungan dinamik seperti HTML, fail konfigurasi antara lain.

2. Pengenalan

Ringkasnya, mesin diklasifikasikan sebagai tidak logik kerana tidak mempunyai konstruk yang menyokong pernyataan if-else dan untuk gelung.

Templat misai terdiri dari nama tag yang dikelilingi oleh {{}} (yang menyerupai misai - karenanya namanya) dan disokong oleh objek model yang berisi data untuk templat.

3. Ketergantungan Maven

Penyusunan dan pelaksanaan templat disokong oleh pelbagai bahasa - dari sisi pelanggan dan juga pelayan.

Untuk dapat memproses templat dari Java, kami menggunakan perpustakaan Java yang dapat ditambahkan sebagai ketergantungan Maven.

Java 8+:

 com.github.spullara.mustache.java compiler 0.9.4 

Java 6/7:

 com.github.spullara.mustache.java compiler 0.8.18 

Kita boleh menyemak versi terbaru perpustakaan di Central Maven Repository.

4. Penggunaan

Mari lihat senario ringkas yang menunjukkan bagaimana:

  1. Tulis templat ringkas
  2. Menyusun templat menggunakan Java API
  3. Laksanakan dengan memberikan data yang diperlukan

4.1. Templat Misai Mudah

Kami akan membuat templat mudah untuk memaparkan perincian tugas yang harus dilakukan:

{{title}}

Created on {{createdOn}}

{{text}}

Dalam templat di atas, bidang dalam pendakap keriting ({{}}) boleh:

  • kaedah dan sifat kelas Java
  • kunci objek Peta

4.2. Menyusun Templat Misai

Kami dapat menyusun templat seperti yang ditunjukkan di bawah:

MustacheFactory mf = new DefaultMustacheFactory(); Mustache m = mf.compile("todo.mustache"); 

MustacheFactory mencari templat yang diberikan di classpath. Dalam contoh kami, kami meletakkan todo.mustache di bawah src / main / resources .

4.3. Melaksanakan Templat Misai

Data yang diberikan ke templat akan menjadi contoh kelas Todo yang definisinya adalah:

public class Todo { private String title; private String text; private boolean done; private Date createdOn; private Date completedOn; // constructors, getters and setters }

Templat yang disusun dapat dijalankan untuk mendapatkan HTML seperti yang ditunjukkan di bawah:

Todo todo = new Todo("Todo 1", "Description"); StringWriter writer = new StringWriter(); m.execute(writer, todo).flush(); String html = writer.toString();

5. Bahagian dan Iterasi misai

Sekarang mari kita lihat bagaimana menyenaraikan todos. Untuk mengulangi data senarai, kami menggunakan bahagian misai.

Bahagian adalah sekumpulan kod yang diulang satu atau lebih kali bergantung pada nilai kunci dalam konteks semasa.

Ia kelihatan seperti:

{{#todo}}  {{/todo}}

Bahagian bermula dengan paun (#) dan diakhiri dengan garis miring (/), di mana setiap tanda diikuti oleh kunci yang nilainya digunakan sebagai asas untuk membuat bahagian.

Berikut adalah senario yang boleh berlaku bergantung pada nilai kunci:

5.1. Bahagian Dengan Senarai Tidak Kosong atau Nilai Tidak Palsu

Mari buat templat todo-section.mustache yang menggunakan bahagian:

{{#todo}} 

{{title}}

Created on {{createdOn}}

{{text}}

{{/todo}}

Mari lihat templat ini dalam tindakan:

@Test public void givenTodoObject_whenGetHtml_thenSuccess() throws IOException { Todo todo = new Todo("Todo 1", "Todo description"); Mustache m = MustacheUtil.getMustacheFactory() .compile("todo.mustache"); Map context = new HashMap(); context.put("todo", todo); String expected = "

Todo 1

"; assertThat(executeTemplate(m, todo)).contains(expected); }

Mari buat templat todos.mustache yang lain untuk menyenaraikan todos:

{{#todos}} 

{{title}}

{{/todos}}

Dan buat senarai todos menggunakannya:

@Test public void givenTodoList_whenGetHtml_thenSuccess() throws IOException { Mustache m = MustacheUtil.getMustacheFactory() .compile("todos.mustache"); List todos = Arrays.asList( new Todo("Todo 1", "Todo description"), new Todo("Todo 2", "Todo description another"), new Todo("Todo 3", "Todo description another") ); Map context = new HashMap(); context.put("todos", todos); assertThat(executeTemplate(m, context)) .contains("

Todo 1

") .contains("

Todo 2

") .contains("

Todo 3

"); }

5.2. Seksyen Dengan Kosong Senarai atau palsu atau Null Nilai

Mari kita uji todo-section.mustache dengan nilai nol :

@Test public void givenNullTodoObject_whenGetHtml_thenEmptyHtml() throws IOException { Mustache m = MustacheUtil.getMustacheFactory() .compile("todo-section.mustache"); Map context = new HashMap(); assertThat(executeTemplate(m, context)).isEmpty(); }

And likewise, test todos.mustache with an empty list:

@Test public void givenEmptyList_whenGetHtml_thenEmptyHtml() throws IOException { Mustache m = MustacheUtil.getMustacheFactory() .compile("todos.mustache"); Map context = new HashMap(); assertThat(executeTemplate(m, context)).isEmpty();; }

6. Inverted Sections

Inverted sections are those which are rendered only once based on the non-existence of the key or false or null value or an empty list. In other words, these are rendered when a section is not rendered.

These start with a caret (^) and end with a slash (/) as shown below:

{{#todos}} 

{{title}}

{{/todos}} {{^todos}}

No todos!

{{/todos}}

The above template when provided with an empty list:

@Test public void givenEmptyList_whenGetHtmlUsingInvertedSection_thenHtml() throws IOException { Mustache m = MustacheUtil.getMustacheFactory() .compile("todos-inverted-section.mustache"); Map context = new HashMap(); assertThat(executeTemplate(m, context).trim()) .isEqualTo("

No todos!

"); }

7. Lambdas

The values for keys of a mustache section can be a function or a lambda expression. In such case, the complete lambda expression is invoked by passing in the text within the section as a parameter to the lambda expression.

Let's look at a template todos-lambda.mustache:

{{#todos}} 

{{title}}{{#handleDone}}{{doneSince}}{{/handleDone}}

{{/todos}}

The handleDone ketetapan utama kepada Java 8 lambda ungkapan seperti yang ditunjukkan di bawah:

public Function handleDone() { return (obj) -> done ? String.format("Done %s minutes ago", obj) : ""; }

HTML yang dihasilkan dengan melaksanakan templat di atas adalah:

Todo 1

Todo 2

Todo 3Done 5 minutes ago

8. Kesimpulannya

Dalam artikel pengantar ini, kami melihat pembuatan templat misai dengan bahagian, bahagian terbalik, dan lambda. Dan kami menggunakan Java API untuk menyusun dan melaksanakan templat dengan memberikan data yang relevan.

Terdapat beberapa ciri Mustache yang lebih maju yang patut diterokai - seperti:

  • memberikan nilai panggilan sebagai nilai yang menghasilkan penilaian serentak
  • menggunakan DecoratedCollection untuk mendapatkan elemen koleksi pertama, terakhir dan indeks
  • membalikkan API yang memberikan data yang diberi teks dan templat

Dan, seperti biasa, kod sumber lengkap untuk ini terdapat di Github.