Jak poprawnie dodać widget autouzupełniania interfejsu JQuery za pomocą narzędzia Backbone.js

Question

Jestem w trakcie uczenia się Backbone.js. Obecnie zakładam, że jeśli używasz Backbone.js, wszystkie javascript/jQuery po stronie klienta powinny być zintegrowane z Backbone. Z różnych samouczków online widzę, jak działa Szkielet i rozumiem jego podstawowe zasady.

Ale co z takimi elementami, jak widgety JQuery UI? Czy należy je również zintegrować z Backbone.js? Na przykład chcę użyć widgetu Autouzupełnianie interfejsu użytkownika jQuery w polu formularza (zobacz poniższy kod). Jak miałbym to zrobić przy pomocy Backbone.js (lub czy nie zawracałbym sobie głowy używaniem Backbone do takich rzeczy)? Wygląda na to, że Backbone "Model" i "Kolekcja" nie działałyby z widżetem autouzupełniania jQuery, ponieważ tego typu rzeczy są związane w obrębie samego widgetu JQuery UI.

(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); 

Jaka jest standardowa praktyka dla takich rzeczy? Jedyne co mogłem wymyślić to stworzyć widok, a następnie dodać widget do funkcji renderowania. Ale to naprawdę nie wydaje mi się bardzo proste.

Answer 1

Attache wszystkie wtyczki podczas renderowania widoku:

można zrobić coś takiego:

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 
     } 
    } 
    }); 
} 

nadzieję, że pomoże

Answer 2

Moim zdaniem, zbiór z danymi jest dostępny używając this.collection, takich jak @saniko, ustaw autouzupełnianie w funkcji widoku render:

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(); 
     } 
    }); 

    ... 
}, 
... 

Answer 3

Oto przydatny artykuł dając przykład autouzupełniania w backbone.js + jQuery i porównując ją z czystym jQuery http://rockyj.in/2012/05/25/intro_to_backbone_jQuery.html

Answer 4

Używam autouzupełniania w celu zwiększenia „lokalizację” pól w wielu widokach formularzy, które współdziałają z różnymi modele i różne apisy wyszukiwania.

W tym przypadku mam wrażenie, że „autouzupełnianie lokalizację” jest „zachowanie” w tej dziedzinie, a nie samego i utrzymania go DRY zaimplementować to w ten sposób widzenia:

• Mam instancję LocalityAutocompleteBehavior
• Mam widoki wykorzystujące to wystąpienie, stosując zachowanie do pola formularza, które mają być powiązane z "autouzupełnianiem jquery-ui" w polu formularza, a następnie tworzy atrybuty w modelu widoku podczas autouzupełniania, widok może wtedy robić, co chce z tymi polami.

Oto niektóre ekstrakty coffeescript (Używam również requirejs i niesamowite jquery-ui amd owinięcia przy https://github.com/jrburke/jqueryui-amd)

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() 

i ekstrakt z myślą używając to zachowanie:

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()}