jQuery components

Permanently deleted user

July 07, 2015 02:33

Hi there,

I'm looking at using some jQuery components in custom modules in the HTML5 application. How do we use the data-binding pattern (or is there another recommended way) to wire-up jQuery components such as the jQueryUi autocomplete?

https://jqueryui.com/autocomplete/#remote-jsonp

I've tried the following

ModuleView.html :

    <input id="searchInput" type="text" data-binding="{@var: searchInputElement}" />

ModuleViewModel.ts :

        initialize(config: any): void {

            var dataSource = [

 

                "ActionScript",

 

                "Asp",

 

                "Perl",

 

                "PHP",

 

                "Python",

 

                "Ruby"

 

            ];

 

            $(this["#searchInputElement"]).autocomplete({

 

                source: dataSource

 

            });

 

            }

Thanks,

Josh

0

• 

  Permanently deleted user

  July 07, 2015 03:30

  Hi Josh,

  The "var" data-binding directive will add the DOM element to the view model as an additional property/member. You need to drop the "#" from the autocomplete setup. The following should work in your view model:

  ModuleViewModel.ts

  $(this[" searchInp?utElement "]).autocomplete({  // this["#searchInputElement"] returns undefined

   

    source: dataSource

   

  });

  Hope this helps,

  --Alejandro

   

  0

Please sign in to leave a comment.