knockout custom select binder with update function

Question

I am trying to develop a custom select binder but I am not able to understand how to develop the update functionality. Currently this is what I have done. I want custom binder to handle this type of data

[{
    message: "Hello",
    Value: 1
}, {
    message: "Hi",
    Value: 2
}, {
    message: "Bye",
    Value: 3
}, ]

Answer 1

The problem, as I understand it: You are using the Bootstrap Fullscreen Select , and you can initialize it, but when you select a new value, no observable gets updated. Basically, we need to know when a new value is selected.

Since the way the widget works is to pop up a screen of options and allow you to select one, and then close that popup, and the widget provides the ability to do an onClose callback, that's all we need.

I'm using the standard convention of a value binding in the select. When the widget closes, if the new value is different from the bound value, I will update the bound value to the new value selected in the widget.

ko.bindingHandlers.menu = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var valueObservable = allBindingsAccessor().value;
        $(element).mobileSelect({
            onClose: function () {
                var newValue = $(this).val();
                if (newValue !== valueObservable()) {
                    valueObservable(newValue);
                }
            }
        });
    }
};

As a fiddle: http://jsfiddle.net/4zsu9pv2/4/