Существует адрес, который отображает форму с базовыми адресами, включая текстовое поле почтового индекса и раскрывающееся меню города/пригорода. В идеале, когда пользователь вводит почтовый индекс, в раскрывающемся списке города автоматически заполняются значения (города/пригороды) под этим почтовым индексом. Я знаю, что кто-то уже задал вопрос о каскадных выпадающих списках, но это отличается тем, что я хочу, чтобы значения городов/пригородов были взяты в результате, вызвав запрос HTTP Get.Как реализовать каскадные выпадающие списки, используя результаты запроса HTTP POST на backbone.js
Как реализовать его с помощью 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;
}
...
фрагменты кода из citiesDropdown макро
<% 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()
})
);
}
....