将Azure连接示例移植到windows应用商店javascript导航应用程序_Azure_Winjs_Azure Mobile Services

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

azure

将Azure连接示例移植到windows应用商店javascript导航应用程序,azure,winjs,azure-mobile-services,Azure,Winjs,Azure Mobile Services,我正在开发一个windows应用商店javascript应用程序。应用程序将使用azure中的数据。当我尝试将azure connectivity示例移植到导航模板时，列表视图显示了表中的所有列。我使用相同的数据从示例中读取代码。html页面和css与示例完全相同 <!DOCTYPE html> <html> <head> <meta charset="utf-8" />  <title&g

我正在开发一个windows应用商店javascript应用程序。应用程序将使用azure中的数据。当我尝试将azure connectivity示例移植到导航模板时，列表视图显示了表中的所有列。我使用相同的数据从示例中读取代码。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>


快速启动
Microsoft AZURE移动服务
样品
1.
插入待办事项

在下面输入一些文本，然后单击“保存”将新的待办事项插入数据库
拯救
2.
查询和更新数据

单击下面的“刷新”从数据库加载未完成的TodoItems。使用复选框完成并更新TodoItems
刷新

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

但在我的例子中，所有列字段都会显示出来

如何仅显示所需的内容，以及如何对listview内容进行格式化。我希望以以下方式显示内容

1
ab

2
拖

3
龙

4
臂 .. ..

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

您尝试了什么，哪些不起作用？您必须将模板应用于listItems WinControl，以指示如何显示项目。显然，默认设置只显示原始项目数据，即JSON。我已经应用了项目模板，但仍然显示了完整的原始内容。未将项模板绑定到listview。我所做的唯一更改是javascript文件，并在这里显示了代码：作为对论坛问题的回答，建议在这里（那里）发布真正的HTML。不是在评论中，而是在问题空间中。格式正确。astaykov。我已经用html代码更新了这个问题。我也这样做了。但仍然显示了完整的原始内容。查看下面的div。这是模板的div，然后您需要“告诉”ListView使用该模板。。。你没有错过吗？