I am trying to render a view for a collection using Backbone.View. But I cannot render the comment view to show the individual comments as a list inside the comments view. Only comments form is rendered. when visited the url of the collection from the address bar the below array is returned as I have written it on the server side code with express.
What can be the issue here I cannot manage to fix? It seems very natural to achieve it with this code, but it is certain that I am missing something. General issue is I am stuck at such detailed points although I can learn a say mvc framework, Backbone, Node, express etc.
CommentsView:
var CommentsView = Backbone.View.extend({
initialize: function (options) {
this.post = options.post;
this.collection = new Comments({post: this.post});//injecting collection from this views options, was injected to this view form router.
this.collection.on('add', this.addComments, this);
},
addComments: function (comment) {
this.$el.append(new CommentView({ model: comment }).render().el);
},
render: function () {
this.$el.append("<h2> Comments </h2>");
this.$el.append(new CommentFormView({post: this.post}).render().el);
return this;
}
});
This is the array returned when the url of collection is visited form the address bar:
[
{
"_id": "547e36df0ca19b2c1a6af910",
"postId": "547d00e30ca19b2c1a6af90b",
"name": "comment one",
"date": "Mon 21 Oct 2014",
"text": "gibberjabber"
}
]
Router method when the route to the comments of the related post is routed to:
comments: function(_id) {
var csv = new CommentsView({ post: this.posts.findWhere( {_id: _id} ) });
this.main.html(csv.render().el);
}
I think it could have something to do with your constructor function for this.collection. When creating a Collection, you should pass in the array as the first parameter and object literal with the options as the second (if you didn't define it when creating the collection class. What I'm thinking is that the "add" event on the collection isn't getting fired so the comments are not being rendered.
var Comments = Backbone.Collection.extend({
model: Post
});
this.collection = new Comments(posts)
I'm guessing that posts is just an array of models
Related
I am working with backbone at the moment, I run a fetch on a new model, and get a response from the server, the model I am fetching should have other models and collections within it, the JSON returned supports this and it looks something like this,
{
"id" : 230,
"name" : "A project name",
"briefversion":{
"id":199,
"project_id":230,
"version_number":1,
"name":"Version 1",
"created_at":"2015-05-14 10:22:29",
"updated_at":"2015-05-14 10:22:29",
"briefversionsections":[{
"id":947,
"briefversion_id":199,
"position":1,
"name":"Overview",
"content":"<p>A general description of the project and some background information, also worth including some context, where is the work going to be used? Billboards, online, showroom etc</p><div><img src="//www.sketchup.com/images/case_study/architecture/robertson_walsh_3.jpg"/></div>",
"created_at":"2015-05-14 10:22:29",
"updated_at":"2015-05-14 10:22:29",
"briefsectonattachments":{}
}, {
"id":948,
"briefversion_id":199,
"position":2,
"name":"Scope of work",
"content":"<p>A list of the deliverables, e.g.</p><ul><li>An exterior view</li><li>An interior view</li><li>An animation</li><li>A website</li></ul>",
"created_at":"2015-05-14 10:22:29",
"updated_at":"2015-05-14 10:22:29",
"briefsectonattachments":{}
},{
"id":949,
"briefversion_id":199,
"position":3,
"name":"Target market",
"content":"<p>ASCribe who the work is to appeal to, what are the demographics and end user types.</p>",
"created_at":"2015-05-14 10:22:29",
"updated_at":"2015-05-14 10:22:29",
"briefsectonattachments":{
}
}]
},
"organisations":{
"id":55,
"name":"Jaguar",
"uri_hash":"jaguar",
"slug":"S336e056",
"information":"",
"type":"organisation",
"currency":"USD",
"notifications":"0",
"add_all":"0",
"created_at":"-0001-11-30 00:00:00",
"updated_at":"2015-05-20 09:16:21",
"users":[
{
"id":111,
"email":"xxxxxxxx#gmail.com",
"first_name":"Matty",
"last_name":"Brook",
"display_name":"mattybrook",
"initials":"MB",
"remember_me":null,
"active":"1",
"invite_code":null,
"forgotten_code":null,
"cost_visible":0,
"login_type":"normal",
"api_token":null,
"created_at":"2015-03-16 15:49:58",
"updated_at":"2015-05-15 13:12:45",
"deleted_at":null,
"pivot":{
"organisation_id":55,
"user_id":111,
"is_admin":"0"
}
}
}
So after the fetch, how can I make sure that briefversion becomes a model and within that briefversionsections within that becomes a collection, similarly how do I make sure that the users attribute of the organisation object also become a collection?
You will need to override parse to handle getting the JSON from your server in the right format. Once that's done you can then instantiate your collections for some of the properties in the initialize method.
For example
initialize: function () {
this.briefversionsections = new Backbone.Collection(this.briefversionsections);
this.users = new Backbone.Collection(this.users);
},
parse: function (response, options) {
var myModel = response.briefversion;
myModel.users= response.organisations.users
return myModel;
}
Below is the current code structure I have in place for a collection that I have manually constructed. I have a json file on my server which I am now trying to load in and basically remove the manual one and construct a collection based on that data. Was wondering what would I possibly need to change below to my code to help accommodate this.
var Game = Backbone.Model.extend({
defaults: {
name: 'John Doe',
age: 30,
occupation: 'worker'
}
});
var GameCollection = Backbone.Collection.extend({
model: Game,
url: 'path/to/json',
parse: function(response) {
return response;
}
});
var GamesView = Backbone.View.extend({
tagName: 'ul',
render: function() {
//filter through all items in a collection
this.collection.each(function(game){
var gameView = new GameView({model: game});
this.$el.append(gameView.render().el);
}, this)
return this;
}
});
var GameView = Backbone.View.extend({
tagName: 'li',
template: _.template($('#gameTemplate').html()),
render: function() {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
var gameCollection = new GameCollection([
{
name: 'John Doe',
age: 30,
occupation: 'worker'
},
{
name: 'John Doe',
age: 30,
occupation: 'worker'
},
{
name: 'John Doe',
age: 30,
occupation: 'worker'
}
]);
var gamesView = new GamesView({collection: gameCollection});
$(document.body).append(gamesView.render().el);
This is one of the many things to love about Backbone. I don't know what you are using for your backend, but you state that you have a json file on your server, hopefully a json file full of the models that should be in your collection. And now here is the magic code (drumroll please..):
var GameCollection = Backbone.Collection.extend({
model: Game,
url: 'path/to/json/on/external/server',
});
var gameCollection = new GameCollection();
gameCollection.fetch();
Not much to it, right? Of course there are several options you can add or change to a fetch, so check out the docs here: http://backbonejs.org/#Collection-fetch. Backbone uses jQuery.ajax() be default, so check out the docs here to see all of the options: http://api.jquery.com/jQuery.ajax/
You shouldn't need the custom parse in your collection unless your models on the server don't match your backbone models.
Things to know:
fetch is asynchronous. It takes time to talk to the server, and the rest of your javascript will move on and complete. You will probably need to at least add a callback function to the success option, which will be called when fetch is finished, and it is good to add something to error as well, in case something goes wrong. You can add data as a query string so that your backend can use it using the data option, the data has to be an object. Here is an example:
gameCollection.fetch({
data: {collection_id: 25},
success: function(){
renderCollection(); // some callback to do stuff with the collection you made
},
error: function(){
alert("Oh noes! Something went wrong!")
}
});
fetch should receive data as JSON, so your url should either exclusive return JSON or be set up to detect an AJAX request and respond to it with JSON.
Firstly you need to fetch it from server as RustyToms said. And the other consideration is how to force the collection view to render itself again once data collected from server, as muistooshort commented.
If you manipulating fetch or sync you'll need to do it multiple times when there are more than one collection in app.
Doing such is native with Marionette, but in plain Backbone you can mimic the method of Marionette's CollectionView and do such:
//For the collection view
var GamesView = Backbone.View.extend({
initialize: function({
this.listenTo(this.collection, 'reset', this.render, this);
});
// Others
});
Then, when collection data fetched from server, the collection will trigger a reset event, the collection view noticed this event and render itself again.
For more than one collections, you can extract the code into a parent object in app and inherit from that.
var App.CollectionView = Backbone.View.extent({
initialize: //code as above
});
var GamesView = App.CollectionView.extend({
//Your code without initialize
});
I know this is a bit old at this point, but wanted to answer for anyone else stuck on this.
The code seems to come from the tutorial found here: http://codebeerstartups.com/2012/12/a-complete-guide-for-learning-backbone-js/
I too re-purposed the demo app found in that tutorial and had trouble rendering using external data.
The first thing is that the data itself needs to be converted to valid JSON or else you'll get a .parse() error.
SyntaxError: JSON.parse: expected property name or '}' at line 3 column 9 of the JSON data
or
error: SyntaxError: Unexpected token n
In your data source file, object properties need to be surrounded by quotes. It should look something like this:
[
{
"name": "John Doe",
"age": 30,
"occupation": "worker"
},
{
"name": "John Doe",
"age": 30,
"occupation": "worker"
},
{
"name": "John Doe",
"age": 30,
"occupation": "worker"
}
]
Secondly, once it's clear the external data is loading, we need to get it to render. I solved this (perhaps ungracefully) by moving the render() command into the success function of your gameCollection.fetch().
gameCollection.fetch({
success: function(collection, response, options) {
console.log('Success!! Yay!!');
$(document.body).append(gamesView.render().el);
},
error: function(collection, response, options) {
console.log('Oh, no!');
// Display some errors that might be useful
console.error('gameCollection.fetch error: ', options.errorThrown);
}
});
There are certainly better ways to accomplish this, but this method directly converts the code learned in the tutorial into something that works with external data.
Coming to Ember from Rails, one of the places I'm struggling is trying to figure out Ember's definitions of models, views, and controllers.
I'm just testing out some sample Ember code. I'm getting my user events via the GitHub API, and I want to change the type name into something readable.
I have a jsbin here, but here's the gist:
App = Ember.Application.create();
App.IndexRoute = Ember.Route.extend({
model: function(){
return Ember.$.getJSON('https://api.github.com/users/thenickcox/events').then(function(data){
return data.splice(0,7);
});
}
});
I have a method that types a type and returns a string:
interpretType: function(type){
if (type === 'PushEvent') {
return 'Pushed';
}
return name;
}
In Rails, this would go on the model. But the only model here is the one that Ember created in memory by default (right?). So then I thought, it's something that each member of the array needs, because here's the view:
<h3> Some events</h3>
<ul>
{{#each}}
<li>I {{interpretType(type)}} to {{repo.name}}</li>
{{/each}}
</ul>
So is that something that goes on Ember.ArrayController? I tried that, like this:
App.IndexController = Ember.ArrayController.extend({
interpretType: function(type){
if (type === 'PushEvent') {
return 'Pushed';
}
return name;
}.property()
});
That just gave me an error. Where do I put this?
PS. So you don't have to look at the GitHub API, here's an example JSON object:
{
id: "1890853674",
type: "CreateEvent",
actor: {
id: 702327,
login: "thenickcox",
gravatar_id: "63f35d9e50dfd73281126b051a51668a",
url: "https://api.github.com/users/thenickcox",
avatar_url: "https://2.gravatar.com/avatar/63f35d9e50dfd73281126b051a51668a?d=https%3A%2F%2Fa248.e.akamai.net%2Fassets.github.com%2Fimages%2Fgravatars%2Fgravatar-user-420.png&r=x"
},
repo: {
id: 14463966,
name: "thenickcox/whiskey_taster",
url: "https://api.github.com/repos/thenickcox/whiskey_taster"
},
payload: {
ref: "master",
ref_type: "branch",
master_branch: "master",
description: "My first ember/rails app"
},
public: true,
created_at: "2013-11-17T09:00:17Z"
},
Here is an updated JSBin
Basically, the each can specify an itemController to decorate the model.
App.EventController = Ember.ObjectController.extend({
interpretType: function(){
var type = this.get('model.type');
if (type === 'PushEvent') {
type = 'Pushed';
}
return type;
}.property('model.type')
});
Handlebars doesn't have functions as you've written it, but since we are now using the event controller which wraps the single model, we just refer to interpretType to do the translation:
{{#each itemController='event'}}
<li>{{interpretType}} to {{repo.name}}</li>
{{/each}}
Put it inside an Ember.ObjectController
ArrayController's deal with methods related to the collection of data from the model, whereas ObjectController deals with methods related to the specific object.
I'm also learning Ember from a Rails background.
If you haven't already come across this, you will definetely want to check out ember-tools, it's a command line generator very similar to what we've got in rails. I cant imagine building an Ember app without something like it..
So, I'm just started using backbone.js and what I have some troubles understanding how to define two collections where one of them is within a model of the other one.
The REST API looks something like this:
/sites <--- one collection
/sites/123/entities <--- another collection
/sites/123/entities/abc <--- a specific entity within a specific site
This is how the Sites collection is defined:
var ROOT = 'http://localhost:5000';
Site = Backbone.Model.extend({
defaults: {
id: "default",
description: "My site"
}
});
Sites = Backbone.Collection.extend({
model: Site,
url: ROOT + "/sites"
});
How would the Entities collection and model look like to achieve this?
This is how I imagine it would be, though haven't tested it:
Entity Model/Collection:
var ROOT = 'http://localhost:5000';
Entity = Backbone.Model.extend({
defaults: {
id: "default",
description: "My Entity"
}
});
Entities = Backbone.Collection.extend({
model: Entity,
ownUrl: '/entities',
site: {},
url: function() {
return (this.site? this.site.url() : '') + this.ownUrl;
},
initialize: function(options) {
this.site = options.site;
}
});
Site Model/Collection:
Site = Backbone.Model.extend({
defaults: {
id: "default",
description: "My site"
}
});
Sites = Backbone.Collection.extend({
model: Site,
url: ROOT + "/sites",
});
Example of setting up:
// New collection of site
var site1 = new Site({id: 'site1', description: "This is site 1"});
var site2 = new Site({id: 'site2', description: "This is site 2"});
// Add entities to sites
var entityCollection1 = new Entities([
{id: 'entity1'},
{id: 'entity2'}
], {site: site1});
// Collection of sites
var mySites = new Sites([site1,site2]);
Edited:
According to Backbone documents, from version 1.1, this.options is not attached automatically anymore. Sorry I was still refer to the 0.9.x code.
In 1.1, Backbone Views no longer have the options argument attached as
this.options automatically. Feel free to continue attaching it if you
like. http://backbonejs.org/#changelog
For the url, my bad, it was supposed to be this.site.url() because it's a model's function which will take the default value as [collection.url/modelId].
In this case, it should return 'site/1' for Model site1 (i.e. 'site/2') then you append whatever your entity collection url will be.(ex: '/entities').
This makes your Entities collection url for site 1 become: /site/1/entities. Any model in this collection will have url /site/1/entities/[modelId]
I have a backbone setup for Workflows. There are multiple workflows/models visible on the page at any given time. If a workflow is not started yet (i.e. not in the database), it is displayed as a New model. Having trouble with passing the fetched model to the view. I'm only passing the attributes rather than the collection it seems? Anyone have any ideas?
When I fetch all workflows from the database, it returns a JSON array of workflows progress.
[{
"ref_id": 41959,
"parent_ref_id": 35,
"fk_workflow_id": 2,
"stage": 1,
"status_max": 4,
"updated": "2012-05-14 17:30:46"
}, {
"ref_id": 41960,
"parent_ref_id": 35,
"fk_workflow_id": 3,
"stage": 3,
"status_max": 4,
"updated": "2012-05-14 12:30:48"
}]
When the page is loaded, all workflows are created as "new models", because we don't know if they've been started yet. Once the fetch has returned the models that have been started, I have to pass the appropriate model to the view. I'm having trouble figuring out how to pass the model properly (i.e. I can pass the attributes, but it seems after that, I don't have access to the collection.create functions etc?)
var self = this;
this.workflows = new Workflow.WorkflowCollection();
this.workflows.fetch({
data:{
ref_id: REF_ID
},
success: function(model, response) {
for(var i = 0, ln = model.models.length; i< ln;i++) {
self.switchWorkflow(model.models[i].get("fk_workflow_id"), new Workflow(model.models[i].attributes));
}
}
});
This is the only way I can figure backbone knows how many models it needs to setup (short of initiating each of the workflows for each customer - ~1million rows)
setupWorkflowSpaces: function(model) {
for(var i =0; i<Workflow.FileWorkflows.length;i++) {
this.switchWorkflow(Workflow.FileWorkflows[i], false);
}
},
switchWorkflow: function(workflow_id, model) {
if(!model)
model = new Workflow;
switch(workflow_id) {
case 1:
this.applicationProcessView(model);
break;
case 2:
this.kitView(model);
break;
case 3:
this.posView(model);
break;
default:
alert('wut');
break;
}
},
kitView: function(model) {
console.log(model);
model.set("fk_workflow_id", 2);
if(this.kit) this.kit.close();
this.kit = new Workflow.PostageView({
model: model
});
},
Try defining the model property in your Backbone Collection:
var Workflow.WorkflowCollection = Backbone.Collection.extend({
model: Workflow
});
If defined, the raw attributes coming back from your server will be converted into a Workflow model.
Then you won't have to iterate through the collection that is returned via the success callback in fetch. All the added models will be in your collection and you can use the .create() method to continue adding more.
After fetch you can iterate through the updated collection using WorflowCollection.each. In the loop you can run your switch statement to assign the each model to an appropriate view.
I hope this helps.