SPEAK Combobox options binding

Question

I am currently implementing a module on SPEAK UI. I have a dialog which shows up when the user clicks on a button. Then, on the dialog, I have a label with a combo box which displays a list of items.

The list is retrieved as follows:

define(["sitecore", "jquery"], function (sitecore, $) {

    var initStepDefinition = sitecore.Definitions.App.extend({

        initialized: function () {
            this.getOptions();
        },
        getOptions: function () {
            var app = this;

            $.get("/api/experimental/getoptionlist").done(
                function (data) {
                    app.OptionBox.set("items",data);
                }
            );          
        }
    });

    return initStepDefinition;
});

Now, I need to display a form under the combo box when the user selects an item from the list. The data being returned from the server is a list of objects (Value and Text) and converted into JSON.

Question: I don't know how to bind in the change event so that on each selection, I get the Id of the selected item.

Note

I've seen that Sitecore makes use of the Knockout.js and that it is the options: items data bind which I need to check but I don't know how. I am new to the SPEAK Framework and this is the first module I am implementing using SPEAK.

Answer 1

I have been able to do it by using the event change:selectedItemId. Below is the code that I have used:

define(["sitecore", "jquery"], function (sitecore, $) {

    var initStepDefinition = sitecore.Definitions.App.extend({

        initialized: function () {
            this.getOptions();
            this.getChangeOption();
        },
        getOptions: function () {
            var app = this;

            $.get("/api/experimental/getoptionlist").done(
                function (data) {
                    app.OptionBox.set("items",data);
                }
            );          
        },
        getChangeOption: function (){
            var app = this;

            app.OptionBox.on("change:selectedItemId", (function (){
                alert(app.OptionBox.viewModel.selectedItemId());
            }));
        }
    });

    return initStepDefinition;
});