Tùy chọn Biểu thức Hiển thị

Question

Tôi đang xem xét các tùy chọn biểu thức được sử dụng trong tầm nhìn. Tôi đã thử dòng mã dưới đây, nhưng có vẻ như chỉ hiển thị văn bản trên trang, ai đó có thể cung cấp các tùy chọn với một số ví dụ hay.

${'Assets' @ i18n, locale='fr-CH', hint='Translation Hint'} 
    ${'Page {0} of {1}' @ format = [count,total] } 

Tôi đã thử và hiểu mã bên dưới để thêm parsys

<div data-sly-resource ="${@path='question_list', resourceType='wcm/foundation/components/parsys'}"></div> 

Cũng từ nơi mà tôi có thể nhận được toàn bộ danh sách các dữ liệu sly- [elements].

Cảm ơn

Answer 1

Options trong biểu thức trông dể thương có thể có hai loại khác nhau của việc sử dụng:

1. Họ có thể đóng vai trò hướng dẫn xử lý đầu ra của một biểu thức, giống như một chức năng sẽ.
2. Khi biểu thức nằm trong câu lệnh data-sly- *, chúng cho phép cung cấp hướng dẫn hoặc tham số cho câu lệnh đó.

Lưu ý: dễ dàng thử các ví dụ được cung cấp dưới đây, bạn có thể cài đặt REPL tool trên dụ AEM của bạn.

Trên một biểu hiện đơn giản (không nằm trong một tuyên bố data-sly-*), tùy chọn sau có thể xảy ra:

• format: concatenates dây.
  Ví dụ: ${'Page {0} of {1}' @ format = [1, 10]}
  Displays: Page 1 of 10
• i18n: Dịch các chuỗi. Ngoài ra, locale cho phép thay đổi ngôn ngữ nếu có thứ gì đó khác với ngôn ngữ trang hiện tại và hint cho phép cung cấp trợ giúp cho người dịch và phân biệt các chuỗi có thể giống hệt nhau nhưng có ý nghĩa khác.
  Ví dụ: ${'Number' @ i18n, locale = 'de', hint = 'Media DPS Folio Number'}
  Displays: Nummer
• join: Xác định dấu phân cách chuỗi để hiển thị giữa các mục của một mảng.
  Ví dụ: ${['foo', 'bar'] @ join = '-'}
  Displays: foo-bar
• context: Kiểm soát cách HTML thoát và bảo vệ XSS áp dụng.
  Ví dụ: ${'<p>Hi!</p><script>alert("hack!")</script>' @ context = 'html'}
  Displays: <p>Hi!</p>

báo cáo sau cho phép các tùy chọn biểu như nêu trên, vì các báo cáo này cũng tương tự như cách viết biểu thức mà không tuyên bố:

• data-sly-text:
  Ví dụ này: <p data-sly-text="${currentPage.title}">Lorem ipsum</p>
  Tương đương với: <p>${currentPage.title}</p>
  (Điều này có thể hữu ích nếu bạn muốn để lại placeholders được cung cấp bởi các nhà thiết kế HTML trong đánh dấu.)
  Vì vậy, ví dụ này: <p data-sly-text="${'Page {0} of {1}' @ format = [1, 10]}"></p>
  Displays: <p>Page 1 of 10</p>
• data-sly-attribute:
  Ví dụ này: <p href="#" data-sly-attribute.href="${currentPage.path}"></p>
  Tương đương với: <p href="${currentPage.path}"></p>
  (Điều này có thể hữu ích để viết HTML hợp lệ vì trình xác thực HTML5 W3C xác minh rằng URL được xây dựng chính xác. Ngoài ra nó cho phép rời placeholders được cung cấp bởi các nhà thiết kế HTML trong đánh dấu)
  Vì vậy, ví dụ này:. <p data-sly-attribute.title="${['foo', 'bar'] @ join = '-'}"></p>
  Displays: <p title="foo-bar"></p>
  Lưu ý rằng dữ liệu ranh mãnh-thuộc tính cũng có thể được sử dụng để thiết lập nhiều thuộc tính bằng cách cung cấp một phím iterable đối tượng giá trị, như trong ví dụ bên dưới. Nhưng việc sử dụng dữ liệu này-ranh mãnh-thuộc tính không cho phép sử dụng bất kỳ tùy chọn: <div data-sly-attribute="${properties}"></div>

báo cáo Sau chấp nhận bất kỳ tùy chọn biểu vì chúng cho phép để vượt qua tên các thông số:

• data-sly-use:
  Ví dụ: <p data-sly-use.bar="${'logic.js' @ foo = 'hello'}">${bar}</p>
  logic.js: use(function() { return this.foo + " world"; });
  Displays: <p>hello world</p>
• data-sly-template and data-sly-call:
  Ví dụ:
  <template data-sly-template.tmpl="${@ foo}">${foo} world</template>
<p data-sly-call="${tmpl @ foo = 'hello'}"></p>
  Displays: <p>hello world</p>

báo cáo sau cho phép một danh sách tùy chỉnh các tùy chọn:

• data-sly-include:
  Chú ý rằng: <div data-sly-include="${ @ path = 'path/to/template.html'}"></div>
  Tương đương với: <div data-sly-include="${'path/to/template.html'}"></div>
  Hoặc thậm chí đến: <div data-sly-include="path/to/template.html"></div>
  (tôi luôn lựa chọn các hình thức viết ngắn hơn.)
  lựa chọn cho dữ liệu ranh mãnh-bao gồm (trừ path) là:
  • prependPath: Thêm một cái gì đó trước khi con đường.
  • appendPath: Thêm thứ gì đó sau đường dẫn.
  • wcmmode: Thay đổi WCM mode cho tệp được bao gồm.
• data-sly-resource:
  Ở đây cũng vậy hình thức viết ngắn gọn là: <div data-sly-resource="par"></div>
  Tương tự như đối với data-sly-include, nhưng nó bổ sung chấp nhận tùy chọn sau:
  • selectors: Để thay thế các bộ chọn.
  • addThanh công cụ: Để thêm bộ chọn.
  • xóaPhân tích: Để xóa bộ chọn.
  • resourceType: Để xác định hoặc thay đổi loại tài nguyên (chỉ cần thiết nếu chưa được xác định khi cần trên nút nội dung).
  • trang tríTagName và cssClassName: Để tương thích ngược với cách AEM thêm phần tử DIV xung quanh các thành phần được bao gồm trong JSP.

Và sau tuyên bố cho phép không có tùy chọn biểu:

• data-sly-test
• data-sly-list
• data-sly-unwrap
• data-sly-element