Question

我在我的SPA应用程序中使用backbone.js，并且需要在其中包含JQuery UI自动完成小部件。

模型

define(['underscore', 'backbone'], function(_, Backbone) 
{
   var Consumer = Backbone.Model.extend
   ({   
        initialize: function()
        {
        },
        toJSON: function() 
        {
            var data;

            var json = Backbone.Model.prototype.toJSON.call(this);

            _.each(json, function(value, key) 
            {
                 data = key;
            }, this);

            return data;
        }   
    });

    return Consumer;
});

集合

define(['jquery', 'underscore', 'backbone', 'models/consumer'], function($, _, Backbone, Consumer)
{
    var Consumers = Backbone.Collection.extend
    ({
          model: Consumer,
          url: 'http://localhost/test',

          initialize: function()
          {
          }
    });

    return new Consumers;
});

查看

define(['jquery', 'underscore', 'backbone', 'text!templates/home.html', 'collections/consumers', 'jqueryui'], function($, _, Backbone, homeTemplate, Consumers)
{
      var HomeView = Backbone.View.extend
      ({
             el: $("body"),

             initialize: function()
             {
                  this.collection = Consumers;

                  this.collection.fetch(({async: false}));
             },
             events: 
             {
                  'focus #consumer': 'getAutocomplete',
             },
             render: function(options)
             {          
                  this.$el.html(homeTemplate);
             },
             getAutocomplete: function () 
             {
                  $("#consumer").autocomplete(
                  {
                        source: JSON.stringify(this.collection),
                  });
             }
    });

    return new HomeView;
 });

问题是autosuggest在用户输入时发送了奇怪的GET请求。

collection.fetch()

使用以下JSON数组填充集合：

["11086","11964","14021","14741","15479","15495","16106","16252"]

当用户开始输入自动完成时（例如15），它会发送以下GET请求：

http://localhost/test/%5B%2211086%22,%2211964%22,%2214021%22,%2214741%22,%2215479%22,%2215495%22,%2216106%22,%2216252%22%5D?term=15

我的代码有什么问题？

Answer 1

From jQuery UI api docs concerning Autocomplete's source option:

字符串：使用字符串时，自动完成插件希望该字符串指向将返回JSON数据的URL资源。

当你这样做时

$("#consumer").autocomplete({
  source: JSON.stringify(this.collection),
});

你提供了一个字符串，这使得autocomplete认为你给的是一个url，而不是给它一个数组：

$("#consumer").autocomplete({
  source: this.collection.toJSON();
});

但您必须拥有模型的label和value属性。

我建议你做的是为集合创建一些单独的功能

getSuggestions: function() {
  // returns an array of strings that you wish to be the suggestions for this collection
}

并改为使用：

$("#consumer").autocomplete({
  source: this.collection.getSuggestions();
});

Backbone.js + JQuery UI自动完成 - 奇怪的行为

1 个答案: