Question

正在开发一个Windows商店的javascript应用程序。该应用程序将使用来自azure的数据。当我尝试将azure连接示例移植到导航模板时，列表视图显示表中的整个列。我使用了样本中相同的数据读取代码。 html页面和css与样本相同。

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8" />
<!--head segment-->
<title>QuickStart</title>

<!-- WinJS references -->    
<link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<script type="text/javascript" src="/MobileServicesJavaScriptClient/MobileServices.js"></script>
<!-- QuickStart references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
<script src="/pages/Advertisement/advertisement.js"></script>
<link href="/pages/Advertisement/advertisement.css" rel="stylesheet" />    
</head>
<body>
<!--body segment-->
<div style="margin: 50px 10px 10px 50px" id="overalldiv">
<div style="display: -ms-grid; -ms-grid-columns: 1fr 1fr; -ms-grid-rows: auto 1fr;">

<div style="-ms-grid-column-span: 2; margin: 0px 0px 20px 0px;">
<div style="color: #0094ff; font-size: 8pt">WINDOWS AZURE MOBILE SERVICES</div>
<div style="color: #808080; font-size: 32pt">Sample</div>
</div>

        <div style="-ms-grid-row: 2; -ms-grid-column: 1;">
            <div style="display: -ms-grid; -ms-grid-columns: auto 1fr">
                <div style="-ms-grid-column: 1;" class="tasknumber">
                    1
                </div>
                <div style="-ms-grid-column: 2">
                    <strong>Insert a TodoItem</strong><br />
                    <span style="font-size: small">Enter some text below and click Save to insert a new todo item into your database</span>
                </div>
            </div>
            <div style="margin: 5px 0px 0px 72px; -ms-grid-column: 2">
                <input type="text" id="textInput" />
                <button id="buttonSave" style="margin-left: 5px">Save</button>
            </div>
        </div>

        <div style="-ms-grid-column: 2; -ms-grid-row: 2;">
            <div style="display: -ms-grid; -ms-grid-rows: auto 1fr">
                <div style="-ms-grid-row: 1">
                    <div style="display: -ms-grid; -ms-grid-columns: auto 1fr">
                        <div style="-ms-grid-column: 1; float: left;" class="tasknumber">
                            2
                        </div>
                        <div style="-ms-grid-column: 2">
                            <strong>Query and Update Data</strong><br />
                            <span style="font-size: small">Click refresh below to load the unfinished TodoItems from your database. Use the checkbox to complete and update your TodoItems</span>
                        </div>
                    </div>
                    <div style="margin: 5px 0px 0px 72px">
                        <button id="buttonRefresh">Refresh</button>
                    </div>
                </div>
            </div>

            <div id="TemplateItem" data-win-control="WinJS.Binding.Template">
                <div style="display: -ms-grid; -ms-grid-columns: auto 1fr">
                    <input class="itemCheckbox" type="checkbox" data-win-bind="checked: complete; dataContext: this" />
                    <div style="-ms-grid-column: 2; -ms-grid-row-align: center; margin-left: 5px" data-win-bind="innerText: text">
                    </div>
                </div>
            </div>

            <div id="listItems" style="-ms-grid-row: 2; margin: 20px 0px 0px 0px; -ms-grid-row-align: stretch"
                data-win-control="WinJS.UI.ListView"
                data-win-options="{ itemTemplate: TemplateItem, layout: {type: WinJS.UI.ListLayout} }">
            </div>

        </div>
    </div>
</div>
</body>
</html>

实际示例项目仅显示azure数据库表中的文本字段，如下图所示。 Screenshot of the Actual Sample Output

但在我的情况下，所有列字段都会显示出来 Screenshot of my application output

我应该如何只显示所需的内容以及我应该如何为listview内容进行格式化。我想以下列方式显示内容

1
AB

2
拖

3
龙

4
臂 .. .. ..

Answer 1

您是否为ListView设置了itemTemplate？您需要告诉ListView如何显示itemDataSource的每个项目

将Azure连接示例移植到Windows商店javascript导航应用程序

1 个答案: