Comment ajouter correctement un widget autocomplete UI jQuery à l'aide de Backbone.js

Je suis en train d'apprendre Backbone.js. Je présume actuellement que si l'on utilise Backbone.js alors tout javascript / jQuery côté client devrait être intégré à Backbone. À partir des différents tutoriels en ligne, je peux voir comment Backbone fonctionne et comprendre ses principes sous-jacents.

Mais qu'en est-il des choses comme les widgets jQuery UI? Devraient-ils également être intégrés à Backbone.js? Par exemple, je souhaite utiliser le widget JQuery UI Autocomplete dans un champ de formulaire (voir le code ci-dessous). Comment pourrais-je faire cela avec Backbone.js (ou ne serais-tu pas dérangeant d'utiliser Backbone pour de telles choses)? Il semble que Backbone 'Model' et 'Collection' ne fonctionneraient pas avec le widget jQuery Autocomplete, puisque ce genre de choses est lié dans le widget jQuery UI lui-même.

(function($){ $(document).ready(function() { $(this.el).autocomplete({ source: function(req, res) { $.ajax({ url: '/orgs.json?terms=' + encodeURIComponent(req.term), type: 'GET', success: function(data) { res(data); }, error: function(jqXHR, textStatus, errorThrown) { alert('Something went wrong in the client side javascript.'); }, dataType: 'json', cache: false }); } }); }); })(jQuery);

Quelle est la pratique courante pour de telles choses? La seule chose que je pourrais penser était de créer une vue, puis d'ajouter le widget dans la fonction de rendu. Mais cela ne me semble pas vraiment Backbone.

Joignez tous vos plugins lorsque vous rendez la vue:

Vous pouvez faire quelque chose comme ceci:

 render: function () { var view = this; // Fetch the template, render it to the View element and call done. application_namespace.fetchTemplate(this.template, function (tmpl) { var viewModel = view.model.toJSON(); view.$el.html(tmpl(viewModel)); view.$("#categories").autocomplete({ minLength: 1, source: function (request, response) { $.getJSON("url" + view.storeId, { term: request.term, }, function (data) { response($.map(data, function (item) { return { value: item.title, obj: item }; })); }); }, select: function (event, ui) { //your select code here var x = ui.item.obj; var categories = view.model.get("x"); // bla bla } error: function (event, ui) { //your error code here } } }); }

J'espère que cela pourra aider

À mon avis, la collection avec les données est accessible à l'aide de this.collection , comme @saniko j'ai configuré l'autocomplète dans la fonction de render la vue:

 render : function() { ... var me = this; //Small context issues this.$el.find('input.autocompleteSearch').autocomplete({ source : function(request, response){ me.collection.on('reset', function(eventname){ var data = me.collection.pluck('name'); response(data); //Please do something more interesting here! }); me.collection.url = '/myresource/search/' + request.term; me.collection.fetch(); } }); ... }, ...

J'utilise une autocomplète pour améliorer les champs "localité" dans plusieurs vues de forme qui interagissent avec différents modèles et différents apis de recherche.

Dans ce cas, je considère que la "localité autocomplète" est un "comportement" du champ, plutôt qu'une vue elle-même et pour la maintenir DRY je l'implémente de cette façon:

J'ai une instance LocalityAutocompleteBehavior
J'ai des vues en utilisant cette instance en appliquant le comportement au champ de formulaire qu'ils souhaitent
Le comportement lie "jquery-ui autocomplete" au champ de formulaire, puis crée des attributs dans le modèle de la vue lorsque l'autocomplète s'est produite, la vue peut alors faire ce qu'il veut avec ces champs.

Voici quelques extraits de coffeescript (j'utilise aussi requirejs et l'incroyable wrapper de jquery-ui amd à l' adresse https://github.com/jrburke/jqueryui-amd )

The LocalityAutocompleteBehavior:

 define [ 'jquery' #indirect ref via $, wrapped by jqueryui-amd 'jqueryui/autocomplete' ], ($) -> class LocalityAutocompleteBehavior #this applies the behavior to the jQueryObj and uses the model for #communication by means of events and attributes for the data apply: (model, jQueryObj) -> jQueryObj.autocomplete select: (event, ui) -> #populate the model with namespaced autocomplete data #(my models extend Backbone.NestedModel at # https://github.com/afeld/backbone-nested) model.set 'autocompleteLocality', geonameId: ui.item.id name: ui.item.value latitude: ui.item.latitude longitude: ui.item.longitude #trigger a custom event if you want other artifacts to react #upon autocompletion model.trigger('behavior:autocomplete.locality.done') source: (request, response) -> #straightforward implementation (mine actually uses a local cache #that I stripped off) $.ajax url: 'http://api.whatever.com/search/destination' dataType:"json" data:request success: (data) -> response(data) #return an instanciated autocomplete to keep the cache alive return new LocalityAutocompleteBehavior()

Et un extrait d'une vue utilisant ce comportement:

 define [ 'jquery' #if you're using requirejs and handlebars you should check out #https://github.com/SlexAxton/require-handlebars-plugin 'hbs!modules/search/templates/SearchActivityFormTemplate' #model dependencies 'modules/search/models/SearchRequest' #autocomplete behavior for the locality field 'modules/core/behaviors/LocalityAutocompleteBehavior' ], ($, FormTemplate, SearchRequest, LocalityAutocompleteBehavior ) -> #SearchFormView handles common stuff like searching upon 'enter' keyup, #click on '.search', etc... class SearchActivityFormView extends SearchFormView template: FormTemplate #I like to keep refs to the jQuery object my views use often $term: undefined $locality: undefined initialize: -> @render() render: => #render the search form @$el.html(@template()) #initialize the refs to the inputs we'll use later on @$term = @$('input.term') @$locality = @$('input.locality') #Apply the locality autocomplete behavior to the form field 'locality' LocalityAutocompleteBehavior.apply(@model, @$locality) #return this view as a common practice to allow for chaining @ search: => #A search is just an update to the 'query' attribute of the SearchRequest #model which will perform a 'fetch' on 'change:query', and I have a result #view using using the same model that will render on 'change:results'... #I love Backbone :-D @model.setQuery {term: @$term.val(), locality: @$locality.val()}

Voici un article utile donnant un exemple d'autocomplète dans Backbone.js + jQuery et en le comparant au jQuery pur http://rockyj.in/2012/05/25/intro_to_backbone_jQuery.html