I'm a Backbone noob and I've been at a standstill for 2 days now and can't figure out where I'm going wrong. Could anyone help me out?
My app is retrieving a JSON file with a list of components in it. Each component has a category it belongs to. I create a view called "Components" that is a collapsible list. When a component category is clicked, it should open up to show the components in that category. Each of these components (list items) a separate view called "Component".
I'm using a lot of append()'s in the parent view and I don't think this is efficient. I tried to compile a string of html and then append it to the view in one statement but the events of the subviews weren't triggering.
There are probably a few errors going on here. Even though my sublist items should be wrapped in ul's they aren't being. If someone can put me on the path to enlightenment I'd be really grateful!
Here's my code
/* ----------------- PARENT VIEW ---------------------- */
var ComponentsView = Backbone.View.extend({
id: 'components-view',
className: 'components-view',
html: [
'<div class="panel panel--components">',
'<h3 class="panel__heading">add an item</h3>',
'<ul class="component-list"></ul>',
'</div>'
].join(''),
initialize: function(){
var types = [];
var currentTypeSelected = 1;
this.getTypes = function(){
return types;
}
this.getCurrentTypeSelected = function(){
return currentTypeSelected;
}
this.setCurrentTypeSelected = function(value){
currentTypeSelected = value;
}
if(this.collection.length){
this.collection.each(function(model){
var thisItemType = model.attributes.type;
if(types.indexOf(thisItemType)==-1){
types.push(thisItemType);
}
});
}
this.$el.html(this.html);
this.$componentList = this.$('.component-list');
this.render();
},
render: function(){
var that = this;
this.getTypes().forEach(function(type){
that.$('.component-list').append('<li class="component-type">' + type + '');
// now cycle through all the componenets of this type
that.$('.component-list').append('<ul>');
that.collection.byType(type).each(function(model){
that.$('.component-list').append('<li class="component">');
that.$('.component-list').append(that.renderIndividualComponent(model));
that.$('.component-list').append('</li>');
});
that.$('.component-list').append('</ul>');
});
},
renderIndividualComponent: function(model){
var componentView = new ComponentView({model: model});
return componentView.$el;
},
events: {
'click .component-type': 'onOpenSubList'
},
onOpenSubList: function (e) {
alert('open sub list');
}
});
/* ----------------- SUB (list item) VIEW ---------------------- */
var ComponentView = Backbone.View.extend({
tagName: "li",
className: "component",
initialize: function(model){
this.render();
},
render: function(){
var html = '' + this.model.attributes.description + ''//template(this.model.attributes);
$(this.el).append(html);
return this;
},
events: {
'click a': 'onAddComponent'
},
onAddComponent: function (e) {
e.preventDefault();
alert('add component');
}
});
Related
The problem with this code is that the render code is entered twice, and the buffer is not where I expect it. Even when I get the buffer, the stuff I push in is not rendered to the screen.
App.FilterView = Ember.View.extend({
init: function() {
var filter = this.get('filter');
this.set('content', App.ViewFilter.find(filter));
this._super();
},
render: function(buffer) {
var content = this.get('content');
if(!this.get('content.isLoaded')) { return; }
var keys = Object.keys(content.data);
keys.forEach(function(item) {
this.renderItem(buffer,content.data[item], item);
}, this);
}.observes('content.isLoaded'),
renderItem: function(buffer, item, key) {
buffer.push('<label for="' + key + '"> ' + item + '</label>');
}
});
And the App.ViewFilter.find()
App.ViewFilter = Ember.Object.extend();
App.ViewFilter.reopenClass({
find: function(o) {
var result = Ember.Object.create({
isLoaded: false,
data: ''
});
$.getJSON("http://localhost:3000/filter/" + o, function(response) {
result.set('data', response);
result.set('isLoaded', true);
});
return result;
}
});
I am getting the data I expect and once isLoaded triggers, everything runs, I am just not getting the HTML in my browser.
As it turns out the answer was close to what I had with using jquery then() on the $getJSON call. If you are new to promises, the documentation is not entirely straight forward. Here is what you need to know. You have to create an object outside the promise - that you will return immediately at the end and inside the promise you will have a function that updates that object once the data is returned. Like this:
App.Filter = Ember.Object.extend();
App.Filter.reopenClass({
find: function(o) {
var result = Ember.Object.create({
isLoaded: false,
data: Ember.Object.create()
});
$.getJSON("http://localhost:3000/filter/" + o).then(function(response) {
var controls = Em.A();
var keys = Ember.keys(response);
keys.forEach(function(key) {
controls.pushObject(App.FilterControl.create({
id: key,
label: response[key].label,
op: response[key].op,
content: response[key].content
})
);
});
result.set('data', controls);
result.set('isLoaded', true);
});
return result;
}
});
Whatever the function inside then(), is the callback routine that will be called once the data is returned. It needs to reference the object you created outside the $getJSON call and returned immediately. Then this works inside the view:
didInsertElement: function() {
if (this.get('content.isLoaded')) {
var model = this.get('content.data');
this.createFormView(model);
}
}.observes('content.isLoaded'),
createFormView: function(data) {
var self = this;
var filterController = App.FilterController.create({ model: data});
var filterView = Ember.View.create({
elementId: 'row-filter',
controller: filterController,
templateName: 'filter-form'
});
self.pushObject(filterView);
},
You can see a full app (and bit more complete/complicated) example here
I'm trying add a delete button with an ember action from a controller. For some reason Ember.Handlebars.compile('<button {{action "deletePerson"}}>Delete</button> returns a function and not the compiled string.
Here's a jsbin
Here's the relevant portion of code:
App.ApplicationController = Ember.Controller.extend({
columns: function() {
...
buttonColumn = Ember.Table.ColumnDefinition.create({
columnWidth: 100,
headerCellName: 'Action',
getCellContent: function(row) {
var button = Ember.Handlebars.compile('<button {{action "deletePerson" this}}>Delete</button>');
return button; // returns 'function (context, options) { ...'
}
});
...
}.property()
...
After looking through the link from #fanta (http://addepar.github.io/#/ember-table/editable) and a lot of trial and error, I got it working.
Here's the working jsbin.
Here are some key points:
Instead of using getCellContent or contentPath in the ColumnDefinition, you need to use tableCellViewClass and to create a view that will handle your cell
Pass in this to the action on your button — and modify content off that. One gotcha is to edit content, you need to copy it using Ember.copy
Here's the relevant code:
App.ApplicationController = Ember.Controller.extend({
columns: function() {
...
buttonColumn = Ember.Table.ColumnDefinition.create({
columnWidth: 100,
headerCellName: 'Action',
tableCellViewClass: 'App.PersonActionCell'
});
...
}.property(),
onContentDidChange: function(){
alert('content changed!');
}.observes('content.#each'),
...
});
App.PersonActionCell = Ember.Table.TableCell.extend({
template: Ember.Handlebars.compile('<button {{action "deletePerson" this target="view"}}>Delete</button>'),
actions: {
deletePerson: function(controller){
// Will NOT work without Ember.copy
var people = Ember.copy(controller.get('content'));
var row = this.get('row');
// For some reason people.indexOf(row) always returned -1
var idx = row.get('target').indexOf(row);
people.splice(idx, 1);
controller.set('content', people);
}
}
});
The code works every-time EXCEPT for when the router is first called with page load. The, the collection is created, but it's not populated with the notes.fetch();. I've been looking all over, and I can't see why this is happening.
For example, when I go to the URL to load this page, everything but what is in the collection loads. When I go to #blank/' and then go "Back" to thelist` view, the collection AND the models load as they are supposed to. SO how do I get the collection to load once the page loads?
Here's the code:
$(function() {
// Note: The model and collection are extended from TastypieModel and TastypieCollection
// to handle the parsing and URLs
window.Note = TastypieModel.extend({});
window.Notes = TastypieCollection.extend({
model: Note,
url: NOTES_API_URL
});
window.notes = new Notes();
window.NoteView = Backbone.View.extend({
className: "panel panel-default note",
template: _.template($('#notes-item').html()),
events: {
'click .note .edit': 'editNoteToggle',
'click .note .edit-note': 'doEdit'
},
initialize: function () {
_.bindAll(this, 'render');
this.model.bind('change', this.render);
},
render: function() {
this.$el.html(this.template(this.model.toJSON()));
return this;
},
editNoteToggle: function() {
console.log("I've toggled the edit box");
},
doEdit: function() {
console.log('This will edit the note');
}
});
window.NoteListView = Backbone.View.extend({
el: "#app",
template: _.template($('#notes-item-list').html()),
events: {
'click #add-note': 'addNote'
},
initialize: function () {
_.bindAll(this, 'render', 'addNote');
this.collection.bind('change', this.render);
},
render: function() {
this.$el.html(this.template());
console.log('before the loop');
console.log(this.collection.toJSON()); //<- Empty when it first loads, then contains the models when I visit another page and come "back" to this page
this.collection.each(function(note){
var view = new NoteView({ model: note });
$('#notes-list').append(view.render().el);
});
console.log('done');
$('#add-note-toggle').on('click', this, function() {
$('#note-add-form').toggle();
});
return this;
},
addNote: function() {
console.log('The add note was clicked');
}
});
window.NotesRouter = Backbone.Router.extend({
routes: {
'': 'list',
'blank/': 'blank'
},
initialize: function() {
// starts by assigning the collection to a variable so that it can load the collection
this.notesView = new NoteListView({
collection: notes
});
notes.fetch();
},
list: function () {
$('#app').empty();
$('#app').append(this.notesView.render().el);
},
blank: function() {
$('#app').empty();
$('#app').text('Another view');
}
});
window.notesRouter = new NotesRouter();
Backbone.history.start();
})
It looks like your listening to the wrong collection event. Try using
window.NoteListView = Backbone.View.extend({
// ...
initialize: function () {
this.collection.bind('reset', this.render);
}
// ...
});
window.NotesRouter = Backbone.Router.extend({
// ...
initialize: function() {
notes.fetch({reset: true});
}
// ...
});
Right now you are firing off an async collection.fetch(), which will eventually load the data. Problem is, once that data is loaded into the collection, it won't fire a change event, just a bunch of adds. When you go to the blank page and back, you're data has arrived by the second render call and displays properly.
If you modify your fetch() to throw a reset event and then listen for that, you'll have a freshly rendered NoteList once the data comes in without the need to go to the blank page.
I'm learning backbone.js and I'm building my first multimodule app. I'm getting an error that I've never seen before and I think I know the reason, but I can't see how to fix it. I believe it's because the model isn't actually available to the view yet, but I can't see why.
The error is:
Uncaught TypeError: Object function (){ return parent.apply(this, arguments); } has no method 'toJSON'
This is for line 11 in my view, msg.App.MessageListItemView.
Here's my model:
var msgApp = msgApp || {};
msgApp.Message = Backbone.Model.extend();
Here's my collection:
var msgApp = msgApp || {};
msgApp.MessageCollection = Backbone.Collection.extend({
model: msgApp.Message,
url: MESSAGES_API // Call to REST API with Tastypie
});
Here's my list view:
var msgApp = msgApp || {};
msgApp.MessageListView = Backbone.View.extend({
el: '#gps-app',
initialize: function() {
this.collection = new msgApp.MessageCollection();
this.collection.fetch({reset: true});
this.render();
this.listenTo( this.collection, 'reset', this.render );
},
// render messages by rendering each message in it's collection
render: function() {
this.collection.each(function(item){
this.renderMessage(item);
}, this);
},
// render a message by creating a MessageView and appending the the element it renders to the messages element
renderMessage: function(item) {
var messageView = new msgApp.MessageListItemlView({
model: msgApp.Message
});
this.$el.append(messageView.render().el);
}
});
Here's my item view:
var msgApp = msgApp || {};
msgApp.MessageListItemlView = Backbone.View.extend({
tagName: 'li',
className: 'message-list-item',
template: _.template($('#messageListItem').html()),
render: function() {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
And here is my router:
var AppRouter = Backbone.Router.extend({
routes: {
'messages/': 'allMessages',
},
allMessages:function() {
this.messageList = new msgApp.MessageCollection();
this.messageListView = new msgApp.MessageListView({model:this.messageList});
console.log('I got to messages!');
},
});
var app_router = new AppRouter;
I'm looking for any and all suggestions. I'm a noob to begin with, and this is my first multimodule app so I'm having a little trouble managing scope I think.
Thanks for you time!
try to change model: msgApp.Message in msgApp.MessageListView like this:
// render a message by creating a MessageView and appending the the element it renders to the messages element
renderMessage: function(item) {
var messageView = new msgApp.MessageListItemlView({
model: item
});
this.$el.append(messageView.render().el);
}
model parameter in views don't expect type of model, but instance of some model. Hope this helps.
How do i change an elements class on click via ember.js, AKA:
<div class="row" {{bindAttr class="isEnabled:enabled:disabled"}}>
View:
SearchDropdown.SearchResultV = Ember.View.extend(Ember.Metamorph, {
isEnabled: false,
click: function(){
window.alert(true);
this.isEnabled = true;
}
});
The click event works as window alert happens, I just cant get the binding to.
The class is bound correctly, but the isEnabled property should be modified only with a .set call such as this.set('isEnabled', true) and accessed only with this.get('isEnabled'). This is an Ember convention in support of first-class bindings and computed properties.
In your view you will bind to a className. I have the following view in my app:
EurekaJ.TabItemView = Ember.View.extend(Ember.TargetActionSupport, {
content: null,
tagName: 'li',
classNameBindings: "isSelected",
isSelected: function() {
return this.get('controller').get('selectedTab').get('tabId') == this.get('tab').get('tabId');
}.property('controller.selectedTab'),
click: function() {
this.get('controller').set('selectedTab', this.get('tab'));
if (this.get('tab').get('tabState')) {
EurekaJ.router.transitionTo(this.get('tab').get('tabState'));
}
},
template: Ember.Handlebars.compile('<div class="featureTabTop"></div>{{tab.tabName}}')
});
Here, you have bound your className to whatever the "isSelected" property returns. This is only true if the views' controller's selected tab ID is the same as this views' tab ID.
The code will append a CSS class name of "is-selected" when the view is selected.
If you want to see the code in context, the code is on GitHub: https://github.com/joachimhs/EurekaJ/blob/netty-ember/EurekaJ.View/src/main/webapp/js/app/views.js#L100
Good answers, however I went down a different route:
SearchDropdown.SearchResultV = Ember.View.extend(Ember.Metamorph, {
classNameBindings: ['isSelected'],
click: function(){
var content = this.get('content');
SearchDropdown.SelectedSearchController.set('content', content);
var loadcontent = this.get('content');
loadcontent.set("searchRadius", $("select[name=radius]").val());
SearchDropdown.LoadMap.load(content);
},
isSelected: function () {
var selectedItem = SearchDropdown.SelectedSearchController.get('content'),
content = this.get('content');
if (content === selectedItem) {
return true;
}
}.property('SearchDropdown.SelectedSearchController.content')
});
Controller:
SearchDropdown.SelectedSearchController = Ember.Object.create({
content: null,
});
Basically stores the data of the selected view in a controller,