knockout.js and jquery mobile question

[obruening]

i tried to implement a basic example from the knockout.js homepage
with jquery mobile, see http://jsfiddle.net/olli/Actst/

the select box needs some jquery mobile specific updating after
calling addItem and i don't know where to put it. i have created an
event for it, but this is not very elegant. is there a better way?

best regards
oliver

[Mark Bradley]

Hi Oliver,

Does this look better to you?

http://jsfiddle.net/Actst/2/

The idea being that a DO gets evaluated when it is first created, and
whenever the observables it accesses are updated. Since you create the
DO after the bindings are all handled, you can put the code in one
place and not have to handle it with custom event handling.

Regards,
Mark

--
-barkmadley
sent from an internet enabled device

[rpn]

Hello-

I think that you could do what Mark said.  I would probably try to use a manual subscription against the items observableArray and maybe set it up before pushing the values to it.

Another option though would be to create a custom binding that wraps the "options" binding.  This helps to make it so your viewModel remains unaware of the UI that is binding against it. So, your UI depends on your viewModel, but not the other way around.  The nice thing in the custom binding is that you have access to the element, so you have no need to keep track of the ID or reference it in your viewModel.

The binding could simply look like:

    ko.bindingHandlers.jqmOptions = {
        update: function(element, valueAccessor, allBindingsAccessor, context) {
            ko.bindingHandlers.options.update(element, valueAccessor, allBindingsAccessor,context);
            $(element).selectmenu("refresh");
        }
    }

Now, just replace "options" with "jqmOptions" or whatever you want to call it and you are done.

[obruening]

great solutions, thank you both for your answers.

i have implemented the last suggested solution here http://jsfiddle.net/olli/hdHWF/
for documentation.

[Mark Bradley]

agreed, that custom binding is by far the best idea in this situation.

--

[msh...@gmail.com]

Can you verify that this approach still works with KO 2.2.0/2.2.1? \

After upgrading from KO 2.2.0 the binding stopped working.