快速入門：新增項目容器

發行項
03/04/2016

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱最新文件 ]

了解如何將 ItemContainer 物件新增到使用 JavaScript 的 Windows 市集應用程式。ItemContainer 不需要許多 HTML 標記或 JavaScript 程式碼，就能建立簡單的互動元素。利用這個控制項所建立的項目，在動畫、撥動、拖放及暫留等方面，符合 Windows 的外觀及操作方式。

在這篇快速入門文章中，您會使用 Repeater 控制項與 ItemContainer 控制項，建置簡單的客戶資料顯示方式。您也會了解如何使用可結合兩個 ItemContainer 控制項的 HTML <form> 元素，在使用 JavaScript 的 Windows 市集應用程式中建立資料輸入表單。

先決條件

使用瀏覽應用程式範本建立新專案

啟動 Microsoft Visual Studio。
在 [起始頁] 索引標籤，按一下 [新增專案]****。隨即開啟 [新增專案] 對話方塊。
在 [已安裝的]**** 窗格中，展開 [範本] 和 [JavaScript]****，然後按一下 [Windows 市集應用程式] 範本類型。適用於 JavaScript 的可用專案範本會顯示在對話方塊的中央窗格中。
在中央窗格中，挑選 [瀏覽應用程式]**** 專案範本。
在 [名稱] 文字方塊中，輸入 ItemContainer 示範。
按一下 [確定] 來建立專案。

新增含有 ItemContainer 控制項的 HTML

ItemContainer 提供健全的多功能控制項，可在不適合使用其他控制項 (例如 ListView 控制項) 時加以使用。ItemContainer 很適合當成切換按鈕的加強版本。它也可以用來當做放置目標，類似購物車的使用者介面。更重要的是，ItemContainer 可與其他控制項搭配使用，尤其是 Repeater。您可以同時使用 ItemContainer 與 Repeater，將動態資料繫結到 ItemContainer。

ItemContainer 可以在 HTML 頁面中以宣告方式定義，或在執行階段使用隨頁面載入的 JavaScript 定義。這個範例會在 HTML 標記中以宣告方式建立 ItemContainer，以及一個裝載於 Repeater 控制項內的範例。

開啟 home.js 檔案 (/pages/home/home.html)，然後新增下列 HTML 標記。


<!-- Create an entry form for new customer data. -->
<div id="customerInput">
    <h2>Customer entry</h2><br />
    <form id="inputContainer"
        class="itemContainer">
        <input id="firstName" type="text" placeholder="First name" required /><br />
        <input id="lastName" type="text" placeholder="Last name" required /><br />
        <input id="phoneNumber" type="tel" placeholder="Phone number" /><br />
        <input id="email" type="email" placeholder="E-mail" required /><br /><br />
        <div id="contactByEmail"
            class="selectionItem"
            data-win-control="WinJS.UI.ItemContainer"
            data-win-options="{
                tapBehavior: directSelect
            }">Contact by e-mail</div><br />
        <div id="contactByPhone"
            class="selectionItem"
            data-win-control="WinJS.UI.ItemContainer"
            data-win-options="{
                tapBehavior: directSelect
            }">Contact by phone</div><br />
        <button type="submit">Submit</button>
        <button type="reset">Clear</button>
    </form>
</div>

<!-- Create a display for existing customer data -->
<div id="customerList">
    <h2>Customer list</h2><br />
    <div id="entryContainer"
        class="itemContainer"
        data-win-control="WinJS.UI.Repeater"
        data-win-options="{
            data: CustomerData.data
    }">
        <div class="customerListItem"
            data-win-control="WinJS.UI.ItemContainer">
            <b>Name:</b> <span data-win-bind="textContent: name"></span><br />
            <b>E-mail:</b> <span data-win-bind="textContent: email"></span><br />
            <b>Phone: </b> <span data-win-bind="textContent: phoneNumber"></span><br />
            <b>Contact by: </b><span data-win-bind="textContent: contactPreference"></span><br />
        </div> 
    </div>
</div>

這個標記可在應用程式內定義兩個部分的使用者介面：客戶資料輸入表單與現有客戶資料顯示。客戶資料輸入表單在 <form> 元素內包含兩個 ItemContainer 控制項，而 ItemContainer 控制項則扮演加強的核取方塊控制項。客戶資料顯示區段包含的 Repeater 有 ItemContainer，用來顯示個別客戶資料項目。

開啟 home.css (/pages/home/home.css)，然後新增下列程式碼。


/* Style the page so that the entry form and
display are in two separate parts of a grid. */
.maincontent {
    padding: 50px;
    display: -ms-grid;
    -ms-grid-columns: 1fr 1fr;
    -ms-grid-rows: inherit;
}

#customerInput {
    -ms-grid-column: 1;
}

#customerList {
    -ms-grid-column: 2;
}

#entryContainer {  
    overflow-y: auto;
}

.itemContainer {
    width: 500px;
    height: 350px;
}

.selectionItem {
    width: 300px;
    border: 10px;
    height: 50px;
}

/* Create a solid gray border around items
in the customer display list. */
.customerListItem {
    width: 450px;
    margin-top: 10px;
    margin-bottom: 10px;
    border-style: solid;
    border-color: gray;
}

這個樣式會建立一個分成兩部分的格線，以包含應用程式的客戶資料輸入部分與客戶資料顯示部分。客戶資料輸入表單顯示於應用程式左側，而客戶資料顯示則位於右側。

將 JavaScript 事件處理常式套用到控制項

這個應用程式會取得在表單中輸入的資訊，然後顯示於客戶資料清單。提交表單時，來自表單的資料會轉換成單一 JavaScript 物件。接著該物件會新增到已顯示的客戶資料清單中。

用滑鼠右鍵按一下 js 資料夾，然後按一下 [加入] > [新增 JavaScript 檔]。在 [加入新項目] 對話方塊中，將檔案命名為 data.js，然後按一下 [加入]。將參考新增到 default.html 中的新指令碼。
```
<script src='/js/data.js'></script>
```

開啟 data.js (/js/data.js)，然後新增下列程式碼。

(function () {
    "use strict";

    var customers = [];
    var customerList = new WinJS.Binding.List(customers);

    function Customer(customerInfo) {
        this.name = customerInfo.lastName + ", " + customerInfo.firstName;
        this.email = customerInfo.email;
        this.phoneNumber = customerInfo.phone;
        this.contactPreference = "Does not wish to be contacted";

        if (customerInfo.contactByPhone && customerInfo.contactByEmail) {
            this.contactPreference = "Contact by e-mail and phone"
        }
        else if (customerInfo.contactByPhone) {
            this.contactPreference = "Contact by phone only"
        }
        else if (customerInfo.contactByEmail) {
            this.contactPreference = "Contact by email only"
        }
    }

    WinJS.Namespace.define("CustomerData", {
        data: customerList,
        Customer: Customer
    });
})();

這個程式碼會定義新的命名空間 CustomerData 以公開兩個成員：用來儲存客戶資料的 Customer 物件；以及 data 這個可儲存 Customer 物件的 List。

開啟專案的 home.js (/pages/home/home.js)，然後用下列程式碼替代現有的程式碼。

(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/home/home.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {

            // Apply an event handler to when the user
            // submits the form.
            var form = document.forms[0];
            form.onsubmit = function (evt) {

                // Prevent the form from refreshing the page.
                evt.preventDefault();

                // Get the customer input data from the form.
                var entryForm = evt.target;
                var entry = {
                    firstName: entryForm.firstName.value,
                    lastName: entryForm.lastName.value,
                    phone: entryForm.phoneNumber.value,
                    email: entryForm.email.value,
                    contactByEmail: entryForm.children.contactByEmail.winControl.selected,
                    contactByPhone: entryForm.children.contactByPhone.winControl.selected
                };

                // Submit the new Customer data to the list of customers.
                var customer = new CustomerData.Customer(entry);
                var entryList = document.querySelector("#entryContainer").winControl;
                entryList.data.push(customer);

                // Clear the entry form.
                entryForm.querySelector("button[type='reset']").click();
            }

            // Add additional clean-up work when the user 
            // clicks the Reset button.
            form.onreset = function (evt) {
                var entryForm = evt.target;

                // Remove any selection from the item containers.
                entryForm.children.contactByEmail.winControl.selected = false;
                entryForm.children.contactByPhone.winControl.selected = false;
            }

            // Release memory from the 'form' variable after 
            // event handlers have been applied.
            form = null;
        }
    });
})();

這個程式碼會將事件處理常式新增到 <form> 元素中宣告的兩個按鈕。按一下 [提交] 按鈕，程式碼就會從客戶輸入表單取得資料、將新的 Customer 物件新增到 Repeater 控制項的資料來源，然後清除表單。套用到 [重設] 按鈕的事件處理常式會清除表單內所含兩個 ItemContainer 控制項的選取項目。

按 F5 執行範例。當應用程式執行時，將資料輸入 [客戶輸入] 表單，然後按一下 [提交]。新的 ItemContainer 會出現在 [客戶清單] 下，並顯示該客戶的資訊。當應用程式仍在執行時，將更多資料輸入表單，然後按一下 [重設]。這樣會清除表單，並移除表單中兩個 ItemContainer 控制項的所有選取項目。

摘要與後續步驟

在這個快速入門中，您了解到 ItemContainer 控制項的幾個使用方法：使用者選取項目的加強核取方塊控制項，以及 Repeater 控制項內的巢狀控制項。您也了解到如何在使用 JavaScript 的 Windows 市集應用程式中應用 HTML <form> 元素。

ItemContainer 控制項也可用作拖曳與放置目標。不過，本文不會示範做法。

若要深入了解如何使用 Repeater 控制項，請參閱快速入門：新增 Repeater 控制項。

若要深入了解如何建立拖放功能，請參閱如何在 ListView 中啟用重新排序、拖曳和放下功能。

快速入門：新增項目容器

先決條件

摘要與後續步驟

其他資源