2

我正在为我的 SPA 应用程序使用主干.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;
 });

问题是自动建议在用户输入时发送奇怪的 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

我的代码有什么问题？

4

1 回答 1

3

来自关于 Autocomplete 的源选项的 jQuery UI api 文档：

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

当你这样做

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

您提供了一个字符串，这会使自动完成功能认为您提供的是一个 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();
});
于 2012-10-15T10:46:43.703 回答