rniemeyer / knockout-jqAutocomplete

knockout-jqAutocomplete is a Knockout.js plugin designed to work with jQuery UI's autocomplete widget.
MIT License
49 stars 20 forks source link

dataValue overwriting observables and changing to simple objects #6

Open skmasq opened 10 years ago

skmasq commented 10 years ago

Problem I was having was adjusting correct observables and object structure to get back object but show in input box only one value of object.

Declaration:

<input data-bind="jqAuto: { value: $row()[$col().DBKey]().GLCode, dataValue: $row()[$col().DBKey], source: myOptions, inputProp: 'GLCode', labelProp: 'Description',valueProp: 'GLCode' }" />

Where $row()[$col().DBKey] = Object().GLCode in this:

Object = ko.observable({
    ID: 1,
    ItemCode: "Net Amount",
    // This needs to be observable for dataValue prop
    GLCode: ko.observable({
        ID: 1,
        // This needs to be observable otherwise it will throw string is not a function
        GLCode: ko.observable("sometext")
    })
});

and myOptions is:

myOptions = function(s,callback){
    callback([{
        ID: 2,
        // Notice this is not observable, because if it was
        // then input value would be [input HTMLInputElement] or something like that
        GLCode: "someothertext"
    }]);
}

So the problem was that these lines:

48: if (ko.isWriteableObservable(options.dataValue)) {
49:                     options.dataValue(ui.item.data);

were overwriting this:

GLCode: ko.observable({
        ID: 1,
        GLCode: ko.observable("sometext")
    })

to

GLCode: ko.observable({
        ID: 1,
        GLCode: "sometext"
    })

So I changed those line to this to preserve observables:

48: if (ko.isWriteableObservable(options.dataValue)) {
49:                     ko.mapping.fromJS(ui.item.data, {}, options.dataValue);

I hope this will help anyone struggling with the same issue.