快速入门：添加项容器

项目
03/04/2016

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅最新文档 ]

了解如何使用 JavaScript 将一个 ItemContainer 对象添加到你的 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 文件中进行定义。此示例可以使用在 Repeater 控件中托管的一个示例以声明方式在 HTML 标记中创建 ItemContainer。

打开 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 中启用重新排序和拖放。

通过

快速入门：添加项容器

先决条件

摘要和后续步骤

其他资源