ampersand-select-demo unsuccessful with provided el

ampersand-select-demo-unsuccessful-with-provided-el

/*global console*/
var SelectView = require('../ampersand-select-view');
var FormView = require('ampersand-form-view');

var Model = require('ampersand-state').extend({
    props: {
        id: 'string',
        title: 'string'
    }
});
var Collection = require('ampersand-collection').extend({
    model: Model
});

var collection1 = new Collection([
    { id: 'foo', title: 'Foo Option' },
    { id: 'bar', title: 'Bar Option' },
    { id: 'baz', title: 'Baz Option' }
]);


var BaseView = FormView.extend({
    fields: function () {
        var requiredInvalid = window.requiredInvalid = new SelectView({
                name: 'three.2',
                parent: this,
                options: collection1,
                idAttribute: 'id',
                textAttribute: 'title',
                required: true,
                unselectedText: 'show validation text after initial interaction'
        });

        var requiredInvalidEager = window.requiredInvalidEager = new SelectView({
                name: 'three.2',
                parent: this,
                options: collection1,
                idAttribute: 'id',
                textAttribute: 'title',
                required: true,
                eagerValidate: true,
                unselectedText: 'show validation text immediately'
        });

        return [
            new SelectView({
                name: 'one.1',
                parent: this,
                options: ['a', 'b', 'c'],
                unselectedText: 'please choose one'
            }),
            new SelectView({
                name: 'one.2',
                parent: this,
                options: ['a', 'b', 'c'],
                unselectedText: 'please choose one'
            }),
            new SelectView({
                name: 'one.3',
                parent: this,
                options: ['a', 'b', 'c'],
                value: 'c',
                unselectedText: 'please choose one'
            }),

            new SelectView({
                name: 'two.1',
                parent: this,
                options: [ ['a', 'Option A'], ['b', 'Option B'], ['c', 'Option C'] ],
                unselectedText: 'please choose one'
            }),
            new SelectView({
                name: 'two.2',
                parent: this,
                options: [ ['a', 'Option A'], ['b', 'Option B'], ['c', 'Option C'] ],
                value: 'b',
                unselectedText: 'please choose one'
            }),

            new SelectView({
                name: 'three.1',
                parent: this,
                options: collection1,
                value: collection1.at(2),
                idAttribute: 'id',
                textAttribute: 'title',
                unselectedText: 'please choose one'
            }),
            requiredInvalid,
            requiredInvalidEager,

            new SelectView({
                name: 'three.3',
                parent: this,
                options: collection1,
                value: collection1.at(2),
                idAttribute: 'id',
                textAttribute: 'title',
                yieldModel: false
            }),

            new SelectView({
                name: 'select-only',
                parent: this,
                options: ['a', 'b', 'c'],
                template: '<select></select>'
            }),

            new SelectView({
                name: 'own-el-select',
                parent: this,
                el: document.querySelector('#dummyEl'),
                options: ['im using my own el'],
                template: '<select></select>'
            })
        ];
    }
});


document.addEventListener('DOMContentLoaded', function () {
    var dummyEl = document.createElement('div');
    dummyEl.id = 'dummyEl';
    var mainContainer = document.createElement('div');

    document.body.appendChild(dummyEl);
    document.body.appendChild(mainContainer);
    var baseView = new BaseView({el: mainContainer });
    baseView.on('all', function (name, field) {
        console.log('Got event', name, field.value, field.valid);
    });
    baseView.render();

    //cycle a field
    var i = 0;
    var field = baseView.getField('one.3');
    var options = [null].concat(field.options);

    setInterval(function () {
        i = (i + 1) % (field.options.length + 1);

        baseView.getField('one.3').setValue(options[i]);
    }, 1000);


    //Add options to a collection field
    setInterval(function () {
        collection1.add({ id: new Date().toString(), title: new Date().toString() });
    }, 1000);
});