# 127: Asas Templat JavaScript - Trik CSS

Anonim

Templat adalah sebahagian daripada HTML yang perlu anda suntik ke halaman. Selalunya templat dibuat "sisi pelayan" - kerana templat itu datang ke JavaScript yang terbentuk sepenuhnya dan hanya perlu dimasukkan ke dalam DOM. Tetapi kadang-kadang itu tidak dapat dilaksanakan atau memerlukan perjalanan pergi balik ke pelayan yang mungkin lambat. Sekiranya templat itu betul dalam JavaScript sangat sesuai. Anda pasti boleh melakukan sedikit penggabungan rentetan dengan menambahkan bit HTML dan data sehingga anda mempunyai templat yang anda perlukan. Tetapi kemungkinan itu tidak ideal kerana tidak memisahkan keprihatinan data dan templat. Templat JavaScript sebenar boleh membantu di sini.

Dalam screencast ini kita akan membahas asas "mengapa" templat JavaScript dan kemudian secara khusus merangkumi contoh mudah bagaimana ia dilakukan di Underscore.js. Kemudian kita akan membahas beberapa alternatif lain.

Demo

var compiled = _.template( " " + "" + "" + " " ); var i, toAppendString = ""; for (i = 0; i < data.movies.length; i++) ( toAppendString += compiled(data.movies(i)); ) $("body").append(toAppendString);

Lihat Pen% = penName%> oleh Chris Coyier (@chriscoyier) di CodePen

Pautan

  • Demo Asas di CodePen
  • Templat Underscore.js
  • NetTuts: Amalan Terbaik Semasa Bekerja Dengan Templat JavaScript
  • MDN: Templat JavaScript
  • John Resig: Templat Mikro JavaScript
  • James Padolsey: Interplasi lurus ke atas