So, first assume we have a WCF service which returns a set of records.
1: [OperationContract]
2: [WebInvoke(Method = "POST",
3: BodyStyle = WebMessageBodyStyle.Wrapped)]
4: CaseListResult [] GetCaseList(CaseListQueryCriteria criteria);
Now for our result page layout
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <meta charset="utf-8">
5: <title>itemsPage</title>
6:
7: <!-- WinJS references -->
8: <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
9: <script src="//Microsoft.WinJS.0.6/js/base.js"></script>1:2: <script src="//Microsoft.WinJS.0.6/js/ui.js">1: </script>2:3: <link href="/css/default.css" rel="stylesheet">4: <link href="/css/itemsPage.css" rel="stylesheet">5: <script src="/js/data_from_wcf.js"></script>
10: </head>
11: <body>
12: <!-- item template definition -->
13: <div id="my_template" class="itemtemplate" data-win-bindsource="data" data-win-control="WinJS.Binding.Template">
14: <div class="item-overlay">
15: <div class="item-title" data-win-bind="innerText: DisplayID"></div>
16: <div class="item-subtitle" data-win-bind="innerText: CaseType"></div>
17: </div>
18: </div>
19: <!-- The content that will be loaded and displayed. -->
20: <div class="itemspage fragment">
21: <header aria-label="Header content" role="banner">
22: <button class="win-backbutton" aria-label="Back" disabled></button>
23: <h1 class="titlearea win-type-ellipsis">
24: <span class="pagetitle">TestSplit</span>
25: </h1>
26: </header>
27: <section aria-label="Main content" role="main">
28: <div class="itemslist" data-win-control="WinJS.UI.ListView" data-win-options="{itemTemplate: select('#my_template') , layout:{type:WinJS.UI.GridLayout}}"></div>
29: </section>
30: </div>
31: </body>
32: </html>
I got problem displaying result on the page due to a tricky piece of code, in the list view, I have to use {itemTemplate : select(‘#my_template’)…} to get right template instead of as many other posts on the internet that simply coded like this : {itemTemlate:my_template,…}
And the java script codes to retrieve data from WCF and then bind to data list.
1: (function () {
2: "use strict";
3: var q = { "item": { "UserID": "domain\\userid" } };
4: WinJS.xhr(
5: {
6: type: "POST",
7: url: "http://10.1.184.2:8080/tmmbwadapter/services/test.svc/AJAX/GetCaseList",
8: headers: {
9: "Content-type": "application/json",
10: },
11: data: JSON.stringify(q)
12: }
13:
14: ).done(function (result) {
15: var jo = JSON.parse(result.responseText);
16: var cases = jo.GetCaseListResult;
17: //var cases = [{ DisplayID : "test", Applicant : "testa"}];
18: var caseList = new WinJS.Binding.List(cases);
19: var lv = document.querySelector(".itemslist").winControl;
20: lv.itemDataSource = caseList.dataSource;
21:
22: },
23: function (err) {
24: //error handling goes here...
25: });
26: })();
沒有留言:
張貼留言