Có rất nhiều khung bên phía máy khách ràng buộc dữ liệu trong những ngày này (Ember, Backbone, Knockout và Angular là những cái phổ biến mà tôi biết).Cách phân phối các mẫu có thể kết buộc dữ liệu được hiển thị trước
Vấn đề với tất cả các khuôn khổ là tải ban đầu. Bạn phải đánh dấu HTML của mình với trình giữ chỗ, và tùy thuộc vào cách nó được thực hiện, khách hàng sẽ thấy các khối trang trống hoặc ngẫu nhiên {{ markup }}. Hơn nữa, hầu hết các mẫu này được phân tích cú pháp phía máy khách, thay vì được biên dịch trước. Lý tưởng nhất là khi người dùng truy cập trang web lần đầu tiên, họ sẽ được phân phối một số HTML được hiển thị trước với tất cả dữ liệu được điền và điều đó sẽ cung cấp cho họ cái gì đó để xem trong khi tất cả các mẫu JavaScript được biên dịch trước tải cú pháp ràng buộc dữ liệu. Từ đó trở đi, nó sẽ sử dụng định tuyến phía máy khách và chúng ta chỉ có JSON trên dây.
Tôi có thể thực hiện một nửa số này với Jade hoặc một số ngôn ngữ mẫu khác có thể được hiển thị trên máy chủ hoặc phía máy khách. Điều tôi không thể hiểu là làm thế nào tôi có thể làm được điều này để chơi một cách độc đáo với một trong những khuôn khổ đó.
Ví dụ, trong Knockout, xem bạn có thể trông như thế này:
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>
Trong Jade, tôi sẽ xác định cùng một mẫu như thế này:
p First Name
b= firstName
p Last Name
b= lastName
nào, cho tò mò, được được biên soạn cho điều này:
function anonymous(locals) {
var buf = [];
var locals_ = locals || {}, firstName = locals_.firstName, lastName = locals_.lastName;
buf.push("<p>First Name <b>" + jade.escape(null == (jade.interp = firstName) ? "" : jade.interp) + "</b></p><p>Last Name <b>" + jade.escape(null == (jade.interp = lastName) ? "" : jade.interp) + "</b></p>");
return buf.join("");
}
Siêu nhanh để hiển thị phía máy chủ hoặc phía máy khách.
Để có được dữ liệu ràng buộc để làm việc, tuy nhiên, tôi sẽ phải gấp đôi chú thích nguồn:
p(data-bind='text: firstName') First Name
b= firstName
p(data-bind='text: lastName') Last Name
b= lastName
ví dụ, đặt mỗi biến giữ chỗ trong đó hai lần, trong hai định dạng khác nhau.
(May mắn thay, hầu hết các khung này lấy một số đối tượng JSON cho Mô hình Xem (tôi tin), mà tôi có thể phục vụ trực tiếp cho Jade hoặc khung làm việc, do đó phần đó không phải là vấn đề.)
Tôi rất muốn tránh điều đó nhưng tôi không thể nghĩ làm thế nào điều này có thể được mà không cần viết ngôn ngữ templating của riêng tôi mà có một sự phụ thuộc mạnh mẽ trên khuôn khổ lối vào.
Có cách nào để làm điều này mà không có nhiều nỗi đau? Sử dụng bất kỳ giao diện nào ở trên hoặc bất kỳ ngôn ngữ lập biểu mẫu JS nào có thể biên dịch được? Có lẽ thông qua một số plugin/phần mở rộng thay vì phải xác định lại nó ở cấp độ cốt lõi?