Как реализовать каскадные выпадающие списки, используя результаты запроса HTTP POST на backbone.js
Существует адресное представление, которое отображает форму с основными полями адреса, включая текстовое поле почтового индекса и раскрывающийся список городов / пригородов. В идеале, когда пользователь вводит почтовый индекс, раскрывающийся список городов должен автоматически заполняться значениями (города / пригороды) под этим почтовым индексом. Я знаю, что кто-то уже поднял вопрос о каскадных выпадающих списках, однако это отличается тем, что я хочу, чтобы значения городов / пригородов были получены в результате вызова HTTP-запроса Get.
Как мне реализовать это с помощью backbone.js? Я что-то сделал, но чувствую, что это как-то не так. Я добавил функцию, которая будет заполнять коллекцию "пригород" и возвращать коллекцию в качестве параметра при вызове макроса, который обновит раскрывающийся список. Коды ниже.
фрагменты кода из Address.Model.js
...
, updateCities:function(){
var suburb = Backbone.Model.extend({
});
var SuburbCollection = Backbone.Collection.extend({
model: suburb,
url:"http link to get the suburbs list"
});
var SubCol = new SuburbCollection();
SubCol.fetch();
return SubCol;
}
...
Фрагменты кода из города Макрос выпадающего списка
<% registerMacro('citiesDropdown', function (options) { %>
<%
var suburbs= options.cities;
%>
<label class="control-label" for="<%= options.manage ? options.manage : ''%>state">
<%= _('City').translate() %>
<small><%= _('(required)').translate() %></small>
</label>
<div class="controls">
<select class="input-xlarge" id="<%= options.manage ? options.manage : ''%>city" name="city" data-type="city">
<option value="">
<%= _('-- Select --').translate() %>
</option>
<% _.each(suburbs, function (suburb) { %>
<option>
<%= suburb.name %>
</option>
<% }) %>
</select>
</div>
<% }) %>
Address.View
...
, events: {
...
,'blur input[data-type="zip"]': 'updateCity'
...
, updateCity: function (e)
{
this.$('[data-type="city"]').closest('.control-group').empty().append(
SC.macros.citiesDropdown({
cities: this.model.updateCities()
})
);
}
....