JSFiddle - React, Tailwind, and code Playground

by brianjmiller

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone.js"></script>
<h2>Test</h2>
<select id="my-select"></select>

JavaScript

var SelectView = Backbone.View.extend({
            el: '#my-select',
    //tagName: "select",

            events: {
                'change': 'addToList'
            },
 
            render: function () {
                this.collection.each(function (item) {
                    var itemView = new SelectItemView({ model: item});
                    itemView.render();
                    
                    this.$el.append(itemView.$el)
                }, this);
                return this;
            },
 
            addToList: function (e) {
                // myList is the collection that your list is listening on
                var modelId = $(e.currentTarget.options[e.currentTarget.selectedIndex]).val();
                otherCollection.add(this.collection.get(modelId));
            }
        });
 
 
        var SelectItemView = Backbone.View.extend({
            tagName: 'option',
 
            render: function () {
                this.$el.html(this.model.get("title"));
                this.$el.attr('value', this.model.cid);
//                this.$el.data('model-id', this.model.id);
            }
        });
 
 
        var OtherCollectionView = Backbone.View.extend({
            tagName: 'ul',
 
            initialize: function () {
                this.listenTo(this.collection, 'add', this.addOne);
                this.listenTo(this.collection, 'remove', this.removeOne);
            },
 
            addOne: function (item) {
                console.log("addOne", item);
                var itemView = new OtherItemView({ model: item });
                itemView.render();
                this.$el.append(itemView.el);
            }
        });
 
 
        var OtherItemView = Backbone.View.extend({
            tagName: 'li',
            render: function () {
this.$el.html(this.model.get("title"));
                return this;
            }
        });
 
 
        // Inititalize variables
        var selectItems = new Backbone.Collection([{ title: 'a' }, {...