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
私のコードの問題は何ですか?