Tạo các yếu tố được chia sẻ sẵn sàng sử dụng bằng cách sử dụng cành

Tôi đang làm việc trên một dự án có nhiều yếu tố được chia sẻ, ví dụ: chân trang, tiêu đề, điều hướng, v.v .. Tôi có vài bố cục mà tôi mở rộng trong quan điểm của mình. Hiện tại, tôi đang tải các phần tử được chia sẻ bên trong khung nhìn của mình, nhưng tôi cần phải cung cấp tất cả các phần tử (Phụ thuộc) cần thiết cho mỗi phần tử được chia sẻ bên trong khung nhìn mà tôi đang nạp nó vào. Tôi muốn có thể bỏ qua bước đó và tải phần tử sẽ thực sự được chuẩn bị để sử dụng ngay lập tức (vì vậy tôi sẽ không cần nhớ tất cả các tệp javascript và css phụ thuộc, vì một số tệp có thể có một vài) . Tôi đã suy nghĩ về việc chỉ định tất cả các tài sản cần thiết cho phần tử chia sẻ bên trong khung nhìn của phần tử, vì vậy khi tôi bao gồm phần tử tôi cần, nó sẽ tải nội dung "tự động", mà không cần tôi chỉ định tất cả chúng trong tầm nhìn của tôi. Vì vậy, câu hỏi của tôi là nếu nó có thể làm điều này hoặc những gì là đúng cách để thực hiện điều này?Tạo các yếu tố được chia sẻ sẵn sàng sử dụng bằng cách sử dụng cành

Hy vọng nó sẽ được giải thích thậm chí tốt hơn sử dụng mã:

Cấu trúc:

views/ 
- /layout/ 
    -> layout.twig 
- /homepage/ 
    -> index.twig 
- /shared/ 
    -> navigation.twig

Layout:

<!-- HTML headers, etc. --> 
{% block assets %} 
    <link rel="stylesheet" href="xxx" /> 
{% endblock %} 

{% block content %} 

{% endblock %}

Xem:

{% extends "layout/layout.twig" %} 
{% block assets %} 
    {{ parent() }} 
    <!-- some assets for view -->  
{% endblock %} 
{% block content %} 
    {% include "shared/navigation.twig" %} 
    <!-- content --> 
{% endblock %}

Shared yếu tố navigation.twig :

// It's not working, of course - just for better explanation of what I'm trying to approach 
{% block assets %} 
    {{ parent() }} 
    <!-- assets needed for shared element --> 
{% endblock %} 
<!-- rest of shared element -->

Tôi đoán, thông thường, bạn không tải tất cả nội dung trong chế độ xem vì một số thành phần được chia sẻ có thể có nhiều phần tử, đặc biệt trong dự án lớn hơn. Ngoài ra, tôi nghĩ rằng nó là tốt đẹp để chỉ ra, rằng tôi không thực sự muốn làm cho phong cách cho họ bên trong <body>, do đó, việc tạo ra <links> bên trong xem không phải là một cách để đi cho tôi. Điều này có nghĩa là hoạt động như một phần tử được chia sẻ mà từ đó bạn có thể kiểm soát vị trí nội dung của bạn sẽ được tải và nội dung nào sẽ được tải mà không cần biết nội dung nào được yêu cầu cho mỗi phần tử được chia sẻ. Cảm ơn bạn trước.

Nguồn

2017-11-22 Dawid Zbiński

Xin chào, bạn đã cố gắng sử dụng biểu định kiểu và khối javascripts riêng biệt chưa? –

Tôi không chắc chắn ý của bạn là gì. Tôi phân tách chúng, khi nói đến phần tử được chia sẻ, các kịch bản chủ yếu ở phần cuối của khung nhìn của phần tử chia sẻ đó (điều này là tốt, nhưng tôi muốn chúng ở cuối phần thân) và các bảng định kiểu được nạp từ khung nhìn chính nó (đó là một vấn đề đối với tôi, vì tôi muốn có thể viết chúng vào quan điểm của họ và đưa chúng vào trong đầu) –

Cách thực hành tốt nhất được giải thích trong tài liệu của symfony: https://symfony.com/doc /3.4/templating.html#including-stylesheets-and-javascripts-in-twig –

Từ documentation on use:

tái sử dụng ngang ... chủ yếu được sử dụng bởi các dự án cần phải thực hiện mẫu khối tái sử dụng mà không sử dụng thừa kế.

use kết hợp tệp bên ngoài vào tệp hiện tại, với tùy chọn đổi tên các khối thành giá trị duy nhất tại địa phương. Sau đó, các giá trị duy nhất tại địa phương này có thể được tiêm - sử dụng block - vào hệ thống phân cấp thừa kế.

Ví dụ. Bắt đầu với những cơ sở "mẹ":

<head> 
    {% block assets %} 
    <link rel='stylesheet' href='layout.css' /> 
    {% endblock %} 
</head> 
<body> 
    <div id='layout' class='content'> 
    {% block content %} 
    {% endblock %} 
    </div> 
</body>

Define menu, các "thành phần" chúng tôi sẽ "tái sử dụng" sau:

{% block assets %} 
    <link rel='stylesheet' href='menu.css' /> 
{% endblock %} 
{% block content %} 
    <div id='menu' class='content'></div> 
{% endblock %}

Bây giờ, mang lại những kết luận.Chú ý cách chúng ta extends -ing căn cứ, nhưng sau đó use -ing thành phần và tái sử dụng các khối với block:

{% extends "layout.twig" %} 

{% use "menu.twig" with assets as menu_assets, content as menu_content %} 

{% block assets %} 
    {{ parent() }} 
    <link rel='stylesheet' href='view.css' /> 
    {{ block('menu_assets') }} 
{% endblock %} 

{% block content %} 
    <div class='menu'> 
    {{ block('menu_content') }} 
    </div> 
    <div id='view' class='content'></div> 
{% endblock %}

Sản lượng:

<head> 
    <link rel='stylesheet' href='layout.css' /> 
    <link rel='stylesheet' href='view.css' /> 
    <link rel='stylesheet' href='menu.css' /> 
</head> 
<body> 
    <div id='layout' class='content'> 
    <div class='menu'> 
     <div id='menu' class='content'> 
     </div> 
    </div> 
    <div id='view' class='content'></div> 
    </div> 
</body>

Nó không hoàn toàn sự kỳ diệu của "xác định khối với cùng tên và tất cả chúng đều được kết hợp ", nhưng nó khá gần. Bố cục của bạn không biết về trình đơn và menu không biết về bố cục: nhưng cả hai đều đồng ý về các khối có tên là "nội dung" và "nội dung". Chế độ xem sau đó ghép các mẫu đó lại với nhau thành biểu mẫu kế thừa chính xác.

Nguồn

2017-11-29 19:33:47 bishop

Điều tuyệt vời, cảm ơn bạn. Tôi có lẽ đã bị mù khi đọc tài liệu. –

Tạo các yếu tố được chia sẻ sẵn sàng sử dụng bằng cách sử dụng cành

Trả lời

Các vấn đề liên quan