Василий Останин

Какой смысл создавать коллекцию для стран и городов?

IMHO, нужна только модель формы. Остальное писать ручками. Зависимости город\страна рендерить по событию изменения модели\DOM (Marionette.View может сильно облегчить жизнь). На каждый change страны рендерить заново форму(проще)\инпут(чуть сложней).

И да, всегда есть готовый велосипед:
https://github.com/powmedia/backbone-forms

https://github.com/powmedia/backbone-deep-model может помочь. Там при присвоении используется deep extend.

Потому что, event handler'ы присваиваются сразу после выполнения функции render, а Вы редактируете DOM после ее выполнения.

Я бы сделал так:

define(['underscore', 'libs/backbone', 'backbone.epoxy'],
    function (_, Backbone, epoxy) {

        var PanelSlider = Backbone.Epoxy.View.extend({

            id: "PanelSlider",
            className: "panel hide",
            template: JST["tantaman.web.widgets/PanelSlider"],

            fields: ['pie', 'line', 'spline', 'area'],
            themes: ['ClearBlue', 'ClearMozaic', 'ClearGreen', 'ClearGrey', 'ClearOrange', 'ClearRed', 'DottedBlue', 'DottedMozaic', 'DottedGreen', 'DottedGrey', 'DottedOrange', 'DottedRed', 'RoundedBlue', 'RoundedMozaic', 'RoundedGreen', 'RoundedGrey', 'RoundedOrange', 'RoundedRed', 'SquareBlue', 'SquareMozaic', 'SquareGreen', 'SquareGrey', 'SquareOrange', 'SquareRed'],
            objects: {},

            bindings: {
                "select.theme": "value:theme, events:['change']",
                "input.title": "value:title,events:['keyup']",
                "input.min_value": "value:min_value,events:['keyup']",
                "input.max_value": "value:max_value,events:['keyup']",
                "input.default_value": "value:default_value,events:['keyup']",
                "input.slider_step": "value:slider_step,events:['keyup']",
                "input.slider_calibre": "value:slider_calibre,events:['keyup']",
                "select.object": "value:object, events:['change']",
                "select.field": "value:field, events:['change']"
            },

            initialize: function () {
                var session_id = getURLParameter('session_id');

                if (session_id) {

                    $.ajax({
                        type: "GET",
                        url: "/api/objects/",
                        data: {
                            'session_id': session_id
                        },
                        success: _.bind(function (response) {
                            this.objects = response;
                            this.render();
                        }, this),
                        error: function (response) {
                            console.log("Failed!!!11", response);
                        }
                    });

                }
            },

            render: function () {
                this.$el.html(this.template({themes: this.themes, objects: this.objects, fields: this.fields}));
                return this;
            }

        });

        return PanelSlider;

    });

Проблема, на самом деле, в верстке. Эти элементы просто уезжают за экран, наверх.

Посмотрите в сторону Marionette. Сильно упрощает жизнь.

Сделать коллекцию частью другой коллекции стандартными методами не получится. Почему бы просто не добавлять модель в общую коллекцию и в коллекцию в модели?

var Model = Backbone.Model.extend({
    collection: null,
    initialize: function(){
        this.collection = new Collection();
    }
});

var Collection = Backbone.Collection.extend({
    model: Model
});

var collection = new Collection([{}]),
    submodel = new Model({});

collection.add(submodel);
collection.at(0).collection.add(submodel);

console.log(collection.at(1) === collection.at(0).collection.at(0)); // true

jsfiddle.net/bazilio91/rpuT8

underscorejs.org/#template

ERB-style delimiters aren't your cup of tea, you can change Underscore's template settings to use different symbols to set off interpolated code. Define an interpolate regex to match expressions that should be interpolated verbatim, an escape regex to match expressions that should be inserted after being HTML escaped, and an evaluate regex to match expressions that should be evaluated without insertion into the resulting string. You may define or omit any combination of the three. For example, to perform Mustache.js style templating:

_.templateSettings = {
  interpolate: /\{\{(.+?)\}\}/g
};

var template = _.template("Hello {{ name }}!");
template({name: "Mustache"});
=> "Hello Mustache!"

Так же в шаблон можно передавать примесь из вспомогательных функций, для эмулирования каких-либо функций из шаблонизатора Django, это из коробки умеет Marionette.js, на чистом Backbone.js будет выглядеть как-то так:

var TemplateHelper = {
   getName: function() {
       return 'name';
   }
};

var Bookmark = Backbone.View.extend({
  template: _.template(...),
  render: function() {
    this.$el.html(this.template(_.extend(this.model.attributes, TemplateHelper));
    return this;
  }
});

могу порекомендовать
sailsjs.org
net.tutsplus.com/tutorials/javascript-ajax/working...