itemtemplate not working for the list view control
Question
-
Am working on a windows store javascript application. The application will be using data from azure. When I tried to port the azure connectivity sample to a navigation template, the list view displayed the entire columns from the table.I copied the code logic from the azure mobile services project sample to the navigation page control. The html and css file were kept identical to the actual project sample. The javascript code is as follows
// http://go.microsoft.com/fwlink/?LinkId=232511
(function () {
"use strict";
WinJS.UI.Pages.define("/pages/Advertisement/advertisement.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) {
// TODO: Initialize the page here.
buttonRefresh.addEventListener("click", function () {
refreshTodoItems();
});
buttonSave.addEventListener("click", function () {
insertTodoItem({
text: textInput.value,
complete: false
});
});
},
unload: function () {
// TODO: Respond to navigations away from this page.
},
updateLayout: function (element, viewState, lastViewState) {
/// <param name="element" domElement="true" />
// TODO: Respond to changes in viewState.
}
});
})();
var client = new Microsoft.WindowsAzure.MobileServices.MobileServiceClient(
"https://sociarkcloud.azure-mobile.net/",
"IknYWMMZlRMhYFwlcUpQWUTKQeNXZB13"
);
var todoTable = client.getTable('TodoItem');
var todoItems = new WinJS.Binding.List();
var refreshTodoItems = function () {
// This code refreshes the entries in the list view be querying the TodoItems table.
// The query excludes completed TodoItems
todoTable.where({ complete: false })
.read()
.done(function (results) {
todoItems = new WinJS.Binding.List(results);
listItems.winControl.itemDataSource = todoItems.dataSource;
});
};
var insertTodoItem = function (todoItem) {
// This code inserts a new TodoItem into the database. When the operation completes
// and Mobile Services has assigned an id, the item is added to the Binding List
todoTable.insert(todoItem).done(function (item) {
todoItems.push(item);
});
};
var updateCheckedTodoItem = function (todoItem) {
// This code takes a freshly completed TodoItem and updates the database. When the MobileService
// responds, the item is removed from the list
todoTable.update(todoItem).done(function (item) {
todoItems.splice(todoItems.indexOf(item), 1);
});
};
Screen shot of the actual application sample output
Screenshot of my application output after copying the code logic to the page control
My issue is that when am running the application the itemtemplate is not getting set for the list view. I have also made a detailed query at this link
