views.js

    StageOne: Marionette.ItemView.extend({
        template: 'tpl-loan-form-1',
        behaviors: {
            Loadable: {},
            Formable: {
                fields: {
                    firstname: {},
                    middlename: {},
                    lastname: {},
                    gender: {
                        render: {
                            type: 'dropdown',
                            placeholder: 'Не выбрано',
                            values: [
                                {title: 'Мужской', value: 1},
                                {title: 'Женский', value: 0}
                            ],
                        },
                    },
                    phone: {
                        render: 'renderPhone',
                        setOnChange: false,
                        onValidate: 'onValidatePhone'
                    },
                    birthdate: {mask: '99.99.9999'},
                    city: {
                        onChangeReset: 'office',
                        render: {
                            type: 'dropdown',
                            values: function (model) {
                                var cities = shared.cities.map(function(city){return {title:city.get('name'), value: city.id }});
                                return cities;
                            }
                        }
                    },
                    office: {render: {
                        type: 'dropdown',
                        //autoSelectFirst: true,
                        values: function (model) {
                            console.log("Render office", _.cloneDeep(model.attributes));
                            var cityId = model.get('city');
                            var offices = shared.offices.filter(function(office) {
                                return office.get('city') === cityId;
                            }).sort(function(b, a) {
                                return b.get('title') > a.get('title')
                            });
                            offices = offices.map(function(office){ return { title: office.get('title'), value: office.id }});
                            return offices;
                        }
                    }},
                },
            },
        },


        renderPhone: function () {
            var view = this;
            view.ui.phone.val(view.model.get('phone'));
            view.ui.phone.inputmask('+7(999)999-99-99', {
                showMaskOnHover: false,
                onincomplete: function () {
                    view.model.setField('phone', '');
                },
                oncomplete: function () {
                    view.model.checkAndSetPhone(view.ui.phone.val(), function (err) {
                        if (!err) { view.ui.phone.blur(); }
                    });
                },
            });
        },

        onValidatePhone: function (model, isValid, validationResult) {
            var view = this;
            var fieldEl = view.ui.phone;
            var fieldParent = fieldEl.parent();
            if (isValid) {
                fieldEl.parent().removeClass('not-valid').addClass('valid');
            } else {
                fieldEl.parent().removeClass('valid').addClass('not-valid');
            }
        },

        ui: {
            agreeCheckbox        : '.checkbox',
            createBtn : '#order-loan-create',
        },

        events: {
            'click @ui.agreeCheckbox':  'toggleAgreementCheckbox',
            'click @ui.createBtn': 'createOrder',
        },

        triggers: {
            'click @ui.createBtn': 'createOrder',
        },
        //createOrder: function() { 
            //console.log("Save order", this.loanOrder.attributes);
            //this.loanOrder.save(); 
        //},
        modelEvents: {
            'change:agreeWithTerm': '_renderAgreeCheck',
            'valid': 'renderCreateButton',
            'invalid': 'renderCreateButton',
        },

        renderCreateButton: function() {
            if (!this.model.validationError) {
                this.ui.createBtn.removeAttr('disabled')
            } else {
                this.ui.createBtn.attr('disabled', true);
            }
        },

        triggers: {
            'click #loan-reset': 'loan:reset',
        },

        toggleAgreementCheckbox: function() { this.model.toggleAgree(); },

        _renderAgreeCheck: function (model, checked) {
            if (checked) {
                this.ui.agreeCheckbox.addClass('checked');
            } else { this.ui.agreeCheckbox.removeClass('checked'); }
        },

    }),