Last active
December 26, 2015 22:19
-
-
Save akre54/7222672 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var SelectView = Backbone.View.extend({ | |
| el: '#my-select', | |
| events: { | |
| 'change': 'addToList' | |
| }, | |
| render: function() { | |
| this.collection.each(function(item) { | |
| var optionView = new OptionView({model: item}); | |
| this.$el.append(optionView.render().$el); | |
| }, this); | |
| return this; | |
| }, | |
| addToList: function(e) { | |
| var modelId = $(e.currentTarget).val(); | |
| otherCollection.add(this.collection.get(modelId)); | |
| } | |
| }); | |
| var OptionView = Backbone.View.extend({ | |
| tagName: 'option', | |
| render: function() { | |
| this.$el.val(this.model.id); | |
| this.$el.text(this.model.get('title')); | |
| return this; | |
| } | |
| }); | |
| var CollectionView = Backbone.View.extend({ | |
| el: '#my-list', | |
| initialize: function() { | |
| this.listenTo(this.collection, 'add', this.addOne); | |
| }, | |
| addOne: function(item) { | |
| var itemView = new ItemView({model: item}); | |
| this.$el.append(itemView.render().$el); | |
| } | |
| }); | |
| var ItemView = Backbone.View.extend({ | |
| tagName: 'li', | |
| render: function() { | |
| this.$el.text(this.model.get('title')); | |
| return this; | |
| } | |
| }); | |
| // Inititalize variables | |
| var selectItems = new Backbone.Collection([{id: 1, title: 'a'}, {id: 2, title: 'b'}, {id: 3, title: 'c'}]); | |
| var selectView = new SelectView({collection: selectItems}); | |
| selectView.render(); | |
| var otherCollection = new Backbone.Collection(); | |
| var otherView = new CollectionView({collection: otherCollection}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Select / CollectionView Backbone example</title> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore.js"></script> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone.js"></script> | |
| <style type="text/css"> | |
| li { | |
| border: 1px solid black; | |
| background-color: #ccc; | |
| width: 200px; | |
| padding: 10px; | |
| margin-bottom: 5px; | |
| list-style-type: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <select id="my-select"></select> | |
| <ul id="my-list"></ul> | |
| <script type="text/javascript" src="./gistfile1.js"></script> | |
| </body> | |
| </html> |
@jlind0 I made a few changes. Can you give this version a try? Does the general formatting make sense to you?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I made some modifications with the help of the people in #documentcloud on freenode, I have it running without any javascript errors but nothing appears in the select list. HELP!!!!!! ;) http://pastebin.com/8DmewA3X