如何使用Backbone.js正确添加jQuery UI自动完成小部件

Question

我正在学习Backbone.js。我目前认为，如果使用Backbone.jsp，那么所有客户端javascript/jQuery都应该与Backbone集成。从各种在线教程中，我可以看到Backbone是如何工作的，并了解其基本原理。

但是像jQueryUI小部件这样的东西呢？这些是否也应该与Backbone.js集成？例如，我想在表单字段上使用jQueryUIAutocomplete小部件（请参阅下面的代码）。我该如何使用Backbone.js来完成这项工作（或者不用Backbone来做这些事情）？主干"模型"one_answers"集合"似乎无法与jQuery自动完成Widget一起使用，因为这类东西被绑定在jQuery UI Widget本身中。

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

这种事情的标准做法是什么？我唯一能想到的就是创建一个视图，然后在render函数中添加小部件。但这对我来说并不是真正的主干。

Answer 1

在我的视图中，包含数据的集合是使用this.collection访问的，就像@saniko i在视图的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 2

在渲染视图时附加所有插件：

你可以这样做：

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

希望对有所帮助

Answer 3

我正在使用自动完成来增强许多表单视图中的"locality"字段，这些视图与不同的模型和不同的搜索api交互。

在这种情况下，我觉得"自动完成局部性"是字段的一种"行为"，而不是视图本身，为了保持它的干燥，我以这种方式实现它：

• 我有一个LocalityAutocompleteBehavior实例
• 通过将行为应用于他们想要的表单字段，我有使用此实例的视图
• 该行为将"jquery-ui-autocomplete"绑定到表单字段，然后在视图的模型中创建属性。当自动完成时，视图可以对这些字段执行任何操作

下面是一些coffeescript的摘录（我还在使用requirejs和很棒的jquery-ui-amd包装器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()

以及使用此行为的视图摘录：

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

Answer 4

这里有一篇有用的文章，给出了Backbone.js+jQuery中自动完成的示例，并将其与纯jQuery进行了比较http://rockyj.in/2012/05/25/intro_to_backbone_jQuery.html