CODEWITHSUNDEEP
javascripthtmlwinjs
Jordan Plahn
Jordan Plahn

Reputation: 375

Clearing WinJS binding JavaScript array

I'm sure this is exceedingly simply, but it's not apparent to me at the moment.

I have a WinJS list view as so (defined in home.html):

<div data-win-control="WinJS.UI.ListView" id="listView" style="display: inline"
    data-win-options="{ 
        itemDataSource: NotificationData.itemList.dataSource, 
        itemTemplate: select('#notificationMenuTemplate'),
        layout: { type: WinJS.UI.ListLayout }}">
</div>

Easy enough. My itemDataSource is a JavaScript file (notificationData.js) defined as so:

(function () {
"use strict";

var dataArray = [
    { title: "Title 1", text: "Some text 1", time: "12 hours ago" },
    { title: "Title 2", text: "Some text 2", time: "17 hours ago" },
    { title: "Title 3", text: "Some text 3", time: "3 hours ago" },
    { title: "Title 4", text: "Some text 4", time: "18 hours ago" }
]

var dataList = new WinJS.Binding.List(dataArray);

var publicMembers =
    {
        itemList: dataList
    };
WinJS.Namespace.define("NotificationData", publicMembers);

})();

Also easy enough. Underneath my listView, I have a button and I want that button to clear all the notifications (so empty the array) when it's pressed. I have a home.js file that handles everything in home.html, I'm just unsure of how to access that array and empty it? As I said, I'm sure it's easy but I'm unclear on how to implement it.

Upvotes: 1

Views: 563

Answers (1)

Kraig Brockschmidt - MSFT
Kraig Brockschmidt - MSFT

Reputation: 7024

The first bit to understand with this is how the WinJS.Binding.List relates to the array you create it from. When constructed, the List creates its own map array that contains references to the array items. As a result, if you change properties of items in the array, they also change in the List. However, if you clear out dataArray (e.g. using pop), the List will still maintain references to the original objects and won't be cleared out itself.

One way to change this relationship is to use the { proxy: true } option on WinJS.Binding.List, which means that the List uses the underlying array for its own storage. Then if you clear the array or the List, you clear the other.

Without the proxy option, think of the array as an initializer for the List, after which you then use the List's methods to manage its contents. In your case this makes the most sense because the dataArray variable isn't accessible anywhere else, and it's not accessible through the List either.

Anyway, the easiest way to clear a Binding.List is either to use its splice method to chop off all its items, that is, call List.splice(0, List.length), or you can set List.length = 1 (which splices off all but one item, as setting length to zero isn't supported), then call List.pop() to get the last one.

Upvotes: 4

Related Questions