0

我正在开发一个 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

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

1个
抗体

2
drag

3
dragon

4
arm .. .. ..

4

1 回答 1

1

Have you set the itemTemplate for the ListView? You need to tell the ListView how to display each item of the itemDataSource

于 2013-03-28T13:35:20.657 回答