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

Question

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

但是像 jQuery UI 小部件这样的东西呢？这些也应该与 Backbone.js 集成吗？例如，我想在表单字段上使用 jQuery UI 自动完成小部件(请参见下面的代码)。我将如何使用 Backbone.js 执行此操作(或者人们不会为此类事情使用 Backbone)？似乎 Backbone“模型”和“集合”不能与 jQuery 自动完成小部件一起使用，因为这种东西被绑定(bind)在 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);

此类事情的标准做法是什么？我唯一能想到的就是创建一个 View ，然后在渲染函数中添加小部件。但这对我来说似乎并不是很 Backbone 。

Answer 1

在我看来，使用 this.collection 访问包含数据的集合，就像@saniko 我在 View 的 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();
        }
    });

    ...
},  
...