list.js

// List page
//
var lodash = require('lodash');

exports.View =
{
    title: "List example",
    elements:
    [
        { control: "stackpanel", orientation: "Horizontal", contents: [
            { control: "text", value: "New item:", fontsize: 12 },
            { control: "edit", binding: "itemToAdd" },
        ] },
        { control: "button", caption: "Add", binding: "add", enabled: "{itemToAdd}" },

        { control: "text", value: "Your items", fontsize: 12 },
        { control: "listbox", width: 250, height: 300, select: "Multiple", binding: { items: "items", selection: "selectedItems" } },

        { control: "stackpanel", orientation: "Horizontal", contents: [
            { control: "button", caption: "Remove", binding: "remove", enabled: "{selectedItems}" },
            { control: "button", caption: "Sort", binding: "sort", enabled: "{items}" },
        ] },
    ]
}

exports.InitializeViewModel = function(context, session)
{
    var viewModel =
    {
        itemToAdd: "",
        items: [ "white", "black", "yellow" ],
        selectedItems: [ "black" ]
    }
    return viewModel;
}

exports.Commands = 
{
    add: function(context, session, viewModel)
    {
        viewModel.items.push(viewModel.itemToAdd);
        viewModel.itemToAdd = "";
    },
    sort: function(context, session, viewModel)
    {
        viewModel.items.sort();
    },
    remove: function(context, session, viewModel)
    {
        lodash.pullAllWith(viewModel.items, viewModel.selectedItems, lodash.isEqual);
        viewModel.selectedItems = [];
    },
}