Microsoft Graph Toolkit 使用模板自定義組件

上一篇文章中我們介紹瞭如何使用屬性和CSS去自定義組件，本篇我們將介紹另一個重要的功能，通過模板單獨定義組件的UI。

所有的Microsoft Graph Toolkit組件都支持向其中添加<template>元素的方式去自定義模板。我們將以mgt-agenda爲例，默認如下圖的樣式：

我們想要通過更改模板以展示更多信息如：

• 展示事件的日期和時間
• 點擊標題可以直接跳轉到日曆
• 展示參與者
• 展示事件的描述信息

實現後的效果如圖所示：

效果展示完了，我們來看看如何實現。
每個組件都有多個可編輯的部分，我們可以使用data-type來指定要修改哪些模板。
在本示例中，我們需要自定義3個模板：event view, no-data view和loading view。

<mgt-agenda>
    <template data-type="event">
        <!--
    </template>
    <template data-type="no-data">
        <p class="noData">
            There are no events found!
        </p>
    </template>
    <template data-type="loading">
        <p class="loading">
            Loading...
        </p>
    </template>
</mgt-agenda>

爲了達到我們需要的效果，我們需要寫一些JavaScript函數用來供模板調用，這時我們可以利用組件中的templateContext這個屬性，它可以讓我們以變量、函數和事件對模板的上下文進行擴展。

const months = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"];
document.querySelector('mgt-agenda').templateContext = {
    openWebLink: (e, context, root) => {
        window.open(context.event.webLink, '_blank');
    },
    getDate: (dateString) => {
        let dateObject = new Date(dateString);
        return dateObject.setHours(0, 0, 0, 0);
    },
    getTime: (dateString) => {
        let dateObject = new Date(dateString);
        return dateObject.getHours().toString().padEnd(2, '0')
            + ':' + dateObject.getMinutes().toString().padEnd(2, '0');
    },
    formatDate: (date) => {
        let dateObject = new Date(date);
        return dateObject.getDate()
            + "/" + months[dateObject.getMonth()]
            + "/" + dateObject.getFullYear();
    },
    getTextFromHTML(htmlString) {
        var doc = (new DOMParser()).parseFromString(htmlString, "text/html");
        return doc.body.innerText;
    }
}

現在我們有了格式化日期的函數getDate、getTime和formatDate，打開訪問日曆鏈接的函數openWebLink和一個從HTML字符串中獲取文本的函數getTextFromHTML。

引用想要顯示在模板中的數據，可以使用數據綁定表達式如{{event.subject}}這種格式。可以使用data-props屬性去添加事件監聽器或在模板中直接設置屬性，事件監聽器可以通過"@eventName"這種格式添加如@click:openWebLink。

<template data-type="event">
    <div class="event">
        ...
        <div class="event-title" data-props="{{@click: openWebLink}}">
            {{ event.subject }} @ {{event.location.displayName}}
        </div>
        ...
         <div class="event-description" data-props="{{innerHTML: event.body.content}}" />     ...
    </div>
</template>

本例中第一個div會展示事件的標題和顯示名，並附加了點擊事件。第二個div會展示事件的主體信息。

我們還可以使用data-if和data-else屬性來設置不同條件下展示不同的內容：

<template data-type="event">
    <div class="event">
        ...
        <div data-if="getDate(event.start.dateTime) == getDate(event.end.dateTime)"
      class="event-subTitle">
            {{formatDate(event.start.dateTime)}} 
            from {{getTime(event.start.dateTime)}} 
            to {{getTime(event.end.dateTime)}}
        </div>
        <div data-else class="event-subTitle">
            {{formatDate(event.start.dateTime)}} ({{getTime(event.start.dateTime)}}) 
            -
            {{formatDate(event.end.dateTime)}} ({{getTime(event.end.dateTime)}})
        </div>
        ...
    </div>
</template>

最後要實現的模板部分是參與者的信息展示：

<template data-type="event">
    <div class="event">
        ...
        <div class="event-attendees">
            <mgt-person data-for="attendee in event.attendees" 
                        person-query="{{ attendee.emailAddress.name }}"
                        person-card="hover" />
        </div>
        ...
    </div>
</template>

這裏我們使用了mgt-person組件，data-for屬性表示要在哪個集合中循環遍歷。

模板的使用方法就介紹到這，更多內容請參考Microsoft Docs文檔，附上本篇介紹內容的全部源碼供參考。