array observable with content observable and jqAutocomplete

Question

I'm using Knockout 3 with the plugin jqAutocomplete by Ryan Niemeyer. I have a problem with this model:

var ViewModel = function() {
    var self = this;


    self.myOptionsObs = ko.observableArray([
        { id: ko.observable(1), name: ko.observable("item 1 o"), description: ko.observable("item label 1 o") },
        { id: ko.observable(2), name: ko.observable("item 2 o"), description: ko.observable("item label 2 o") },
        { id: ko.observable(3), name: ko.observable("item 3 o"), description: ko.observable("item label 3 o") }
    ]);

    self.myValueObs = ko.observable();

};

ko.applyBindings(new ViewModel());

<input data-bind="jqAuto: { source: myOptionsObs,  value: myValueObs, inputProp: 'name', template: 'itemTmpl'  }" />

As you can see, there is an observable array and each element is also an observable.

The autocomplete don't work well. As you can see in this Fiddle, the left column has an observable array but its elements aren't observable. If you click in the left box and write something, a list of options appear.

But in the right column, you have the same, but the element's are all observable. If you click in the right box and write something, when the list appear, if you move the cursor up and down, you could see that the row 'name' gets deleted and filled with zeros.

What I have to change in my data-bind attribute?

This question is related with this question.

I have to say that this solution works ok for me. But the updated plugin don't.

Thanks !!

I'd like to add a tag 'knockout-jqAutocomplete' to honor Ryan Niemeyer, but I have not enough reputation to create one. I'm sorry, Ryan. But thank you very much for this binding, is great !! — Jose Luis, Oct 26 '15 at 11:21

score 2 · Accepted Answer · answered Oct 26 '15 at 22:26

The jqAutoComplete plugin isn't setup to work with observable properties (although it could be enhanced to do so without much work).

For now, I think that your best bet is to create a computed that will always return a plain and up-to-date version of your options.

self.myOptionsObs.plain = ko.computed(function() {
   return ko.toJS(self.myOptionsObs); 
});

Sample: http://jsfiddle.net/rniemeyer/45cepL9b/

I'll try to take a look at some point about supporting observable properties. Shouldn't take many changes.

Thank you very much. I'll try it. :-) – Jose Luis Oct 27 '15 at 11:33 — Jose Luis, Oct 27 '15 at 11:33

array observable with content observable and jqAutocomplete

1 Answers1