5.5 - コンポーネントの継承

コンポーネントの継承

時には、ビューに注入できるコンポーネントを作りたいと思うことがあります。そのためには、CSSとHTMLの両方を読み込んで、HTMLの正しい部分に挿入する必要があります。

そのためには、コンポーネント名を受け取り、コンポーネント名からタグを作成し、コンポーネント名に基づいてHTMLとCSSをロードするadd_component関数を作成します。この関数は、views/app/content_loader.rs ファイルに定義することにします。

pub fn add_component(component_tag: String, 
    html_data: String) -> String {
    let css_tag: String = component_tag.to_uppercase() + "_CSS";
    let html_tag: String = component_tag.to_uppercase() + "_HTML";
    let css_path = String::from("./templates/components/") + &component_tag.to_lowercase() + ".css";
    let css_loaded = read_file(&css_path);
    let html_path = String::from("./templates/components/") + &component_tag.to_lowercase() + ".html";
    let html_loaded = read_file(&html_path);
    let html_data = html_data.replace(html_tag.as_str(), &html_loaded);
    let html_data = html_data.replace(css_tag.as_str(), &css_loaded);
    return html_data
} 

ここでは、同ファイルで定義されているread_file関数を使用します。そして、コンポーネントのHTMLとCSSをビューデータにインジェクションします。templates/components/ディレクトリにコンポーネントを入れ子にしていることに注意してください。今回は、ヘッダーコンポーネントを挿入するので、add_component関数にヘッダーを渡すと、header.htmlとheader.cssファイルを読み込もうとします。templates/components/header.html ファイルでは、以下の HTML を定義する必要があります。

<div class="header">
    <p>complete tasks: </p><p id="completeNum"></p>
    <p>pending tasks: </p><p id="pendingNum"></p>
</div>

ここでは、完了したToDoと保留中のToDoの件数を表示するだけです。templates/components/header.css ファイルで、次の CSS を定義する必要があります。

.header {
    background: #034f84;
    margin-bottom: 0.3rem;
}
.header p {
    color: white;
    display: inline-block;
    margin: 0.5rem;
    margin-right: 0.4rem;
    margin-left: 0.4rem;
}

add_component関数がCSSとHTMLを正しい位置に挿入するためには、templates/main.htmlファイルの