I am attempting to pass a model to a LayoutView so that the particular model attributes can be edited in the view.
In my ItemView I have an event that grabs the selected model and assigns it to my global App-
var ItemView = Backbone.Marionette.ItemView.extend({
template: _.template(ItemTemplate),
tagName: "tr",
attributes: function(){
return {
"id": this.model.get('id'),
"class": "tr"
};
},
events: {
"click #edit" : "edit"
},
edit: function() {
App.EditModel = this.model;
console.log(App.EditModel); // <-- prints out the model successfully
App.trigger('edit');
}
})
Then, I am using the App.EditModel in my edit view to pass to my template-
var Layout = Backbone.Marionette.LayoutView.extend({
model: App.EditModel,
template : _.template(EditTemplate),
regions : {
"HomeRegion": "#home"
}
});
return Layout;
});
And in the browser I am getting- "Uncaught ReferenceError: firstName is not defined" because the model is not being mapped correctly.
How should I handle this?
When your layout code is first seen the extend function runs taking in all your options, at this point in time I imagine App.EditModel does not yet exist and so the model is stored as undefined
If you want to pass the model to your LayoutView then you should do this when you instantiate it i.e. new Layout({model: this.model});
Related
I'm trying to render the response from an API (JSON) with Backbone.Marionette.ItemView. Not sure why it is not working.
I'm using marionette v2.4.7 (on purpose);
Here is the handlebars template:
<script id="feed-post" type="text/x-handlebars-template">
{{#each posts}}
<img src="{{author.image_url}}" alt="">
<p>{{author.name}}</p>
<span>TODO TIMESTAMP</span>
<p>{{body}}</br>{{topic_type}}</p>
{{/each}}
</script>
Here is my full app.js (all Backbone logic in this file);
// Model
var Post = Backbone.Model.extend({
defaults: {
authorPic: 'Unknown',
authorName: 'Unknown',
timestamp: 'Unknown',
body: 'Not available',
comments: '0'
}
});
// Collection
var Posts = Backbone.Collection.extend({
model: Post,
url: 'http://localhost:4321/blogposts',
initialize: function(){
this.fetch();
}
});
// View
var PostView = Marionette.ItemView.extend({
el: '#content',
template: Handlebars.compile($("#feed-post").html()),
});
//Config
var chunkPosts = new Posts();
var myview = new PostView({collection: chunkPosts});
Also, I tried to console.log the view and it looks like the models are in there.
This answer is tailored to Marionette v2.4.7. LayoutView and ItemView were merged and renamed to View back in v3.0.0.
From the doc on ItemView:
Rendering this view will convert the someCollection collection in to
the items array for your template to use.
You are using posts in your template while the doc says it will be called items.
As a reference, here's the exact code doing that in the ItemView source:
// Serialize the model or collection for the view. If a model is
// found, the view's `serializeModel` is called. If a collection is found,
// each model in the collection is serialized by calling
// the view's `serializeCollection` and put into an `items` array in
// the resulting data. If both are found, defaults to the model.
// You can override the `serializeData` method in your own view definition,
// to provide custom serialization for your view's data.
serializeData: function() {
if (!this.model && !this.collection) {
return {};
}
var args = [this.model || this.collection];
if (arguments.length) {
args.push.apply(args, arguments);
}
if (this.model) {
return this.serializeModel.apply(this, args);
} else {
return {
items: this.serializeCollection.apply(this, args)
};
}
},
The last lines show that for a collection, a new object with items as the only attribute is returned.
It's mentioned that you can override the serializeData function, more information and examples are available in the doc.
You still need to call render on the view and since the collection's fetch is async, you won't have items out of the box so you should wire a listener.
First, don't fetch in the initialize of a collection, it makes the collection pretty much useless for any other use-case.
var Posts = Backbone.Collection.extend({
model: Post,
url: 'http://localhost:4321/blogposts',
});
Listen for the collection sync event, then fetch within the view instead.
var PostView = Marionette.ItemView.extend({
el: '#content',
template: Handlebars.compile($('#feed-post').html()),
initialize: function () {
this.listenTo(this.collection, 'sync', this.render);
this.collection.fetch();
},
});
Marionette even offers collectionEvents:
var PostView = Marionette.ItemView.extend({
// ...snip...
collectionEvents: {
"sync": "render"
}
// ...snip...
});
Basically I want this set up:
var Game = Backbone.Model.extend({
defaults: {
},
autoSync: true
});
var Games = Backbone.Firebase.Collection.extend({
url: 'https://<myapp>.firebaseio.com/games',
autoSync: false,
model: Game
});
Each Game should be auto-synced with server data but I do not not want to listen to the entire child_* Firebase family of events. The goal is to update individual item view instead of repainting the whole list.
Kind regards to folks out there and happy coding ;)
You can update individual items by using an Backbone.Firebase.Collection with autoSync enabled. To do re-render individual items you need to listen to when the items fire the change event. This concept is shown in the BackboneFire Quickstart in the Firebase docs.
A quick note however, you cannot mix a Backbone.Firebase.Model with a Backbone.Firebase.Collection.
Todo Model & Collection
In the below sample, notice how a regular Backbone.Model is being used in the Backbone.Firebase.Collection. The collection by default has autoSync enabled.
// A simple todo model
var Todo = Backbone.Model.extend({
defaults: { title: "New Todo" }
});
// Create a Firebase collection and set the 'firebase' property
// to the URL of your Firebase
var TodoCollection = Backbone.Firebase.Collection.extend({
model: Todo,
url: "https://<your-firebase>.firebaseio.com"
});
Todo View
The below sample is a view for an individual todo item. Inside of the initialize function the listenTo method is used to listen to a model's change event. The change event will be fired each time the model is updated either remotely or locally (which persists changes remotely).
// A view for an individual todo item
var TodoView = Backbone.View.extend({
tagName: "li",
template: _.template("<%= title %>"),
initialize: function() {
// whenever the model changes trigger a re-render of the single view
this.listenTo(this.model, "change", this.render);
},
render: function() {
this.$el.html(this.template(this.model.toJSON()));
return this;
},
});
Render List
With the TodoView set up the list can easily be rendered as well. In the initialize function of the AppView below, we listen to the collection which will be a TodoCollection. Whenever an item is added to the collection the addOne function is executed. The addOne function simply appends a new TodoView to the page.
// The view for the entire application
var AppView = Backbone.View.extend({
el: $('#todoapp'),
initialize: function() {
this.list = this.$("#todo-list"); // the list to append to
// by listening to when the collection changes we
// can add new items in realtime
this.listenTo(this.collection, 'add', this.addOne);
},
addOne: function(todo) {
var view = new TodoView({model: todo});
this.list.append(view.render().el);
}
});
I am using Backbone and Layout Manager. I have this code inside MyView.js:
afterRender: function() {
var scope = this;
this.model.get("books").each(function(bookModel) {
var bookView = new BookView({
model: bookModel
});
scope.insertView(".books", bookView).render();
});
},
Inside BookView.js I have afterRender method:
afterRender: function() {
console.log("after render");
},
I have 6 items in the books property of the model and I call render() for each book. Eventually what I get is "after render" logged only once. What is wrong? Where are the missing 5 "after render" logs??
The code above was invoking inside MyView's afterRender method. For unknown reasons many calls to render() one by one don't invoke each book's afterRender().
After reading again and again in the LayoutManager documentation I realized that I need to call insertView() inside the beforeRender() method without rendering the views. This way render() will render all the sub-views and afterRender() will invoked properly:
beforeRender: function() {
var scope = this;
this.model.get("books").each(function(bookModel) {
var bookView = new BookView({
model: bookModel
});
scope.insertView(".books", bookView);
});
},
I would like to access the app.vent from Marionette.ItemView.
Maybe an option could be to pass a parameter (app.vent) to Marionette.ItemView from Marionette.CompositeView.
Here my code:
// view/compositeView.js
define([
'marionette',
'views/item'
], function (Marionette, itemView) {
var ListView = Marionette.CompositeView.extend({
itemView: itemView
});
});
Any ideas?
P.S.:
I cannot access the app from itemView because there is a problem of circular dependency.
app -> view/compositeView -> view/itemView
v0.9 added an itemOptions attribute that can be used for this. It can either be an object literal or a function that returns an object literal.
Backbone.Marionette.CompositeView.extend({
itemView: MyItemViewType,
itemViewOptions: {
some: "option",
goes: "here"
}
});
All of the key: "value" pairs that are returned by this attribute will be supplied to the itemview's options in teh initializer
Backbone.Marionette.ItemView.extend({
initialize: function(options){
options.some; //=> "option"
options.goes; //=> "here"
}
});
Additionally, if you need to run specific code for each itemView instance that is built, you can override the buildItemView method to provide custom creation of the item view for each object in the collection.
buildItemView: function(item, ItemView){
// do custom stuff here
var view = new ItemView({
model: item,
// add your own options here
});
// more custom code working off the view instance
return view;
},
For more information, see:
the change log for v0.9
the CollectionView documentation for itemViewOptions - note that CompositeView extends from CollectionView, so all CollectionView docs are valid for CompositeView as well
the buildItemView annotated source code
Since Marionette v2.0.0, childViewOptions is used instead of itemViewOptions to pass parameters to the child view:
var MyCompositeView = Marionette.CompositeView.extend({
childView: MyChildView,
childViewOptions: function(model, index) {
return {
vent: this.options.vent
}
}
});
var MyChildView = Marionette.ItemView.extend({
initialize: function(options) {
// var events = options.vent;
}
});
new MyCompositeView({ vent: app.vent, collection: myCollection});
But to work with events, lets use Marionette.Radio instead of passing app.vent to the view.
I have a view that renders a tasks list:
ProjectManager.Views.TasksIndex = Support.CompositeView.extend({
initialize: function() {
_.bindAll(this, "render");
this.collection.bind("add", this.render);
},
render: function () {
this.renderTemplate();
this.renderTasks();
...
},
renderTemplate: function() {
$(this.el).html(JST['tasks/index']({ tasks: this.collection }));
},
renderTasks: function() {
var self = this;
this.collection.each(function(task) {
// only display draft tasks
if (task.get('status') === "draft") {
var taskItem = new ProjectManager.Views.TaskItem({ model: task });
self.renderChild(taskItem);
self.$('#tasks-list').append(taskItem.el);
}
});
}
....
});
I render a view for each task that is in the collection. I would like to be able to delete a task.
I got to the point when after user clicks a delete button for a task I set a status attribute on task model to "deleted". Now somehow I need to bind an event handler in my TasksIndex view to re-render the collection.
I tried
this.collection.bind("change", this.render);
but it didn't work.
How can I propagate event that happened on the model in the child view to the parent view?
this.collection.bind('change', this.render) should call the render method when the model status is changed.
Can you add a console.log('render called'); line to your render method to see if the it's being called when the model status is changed.
I'm thinking the render method is being called but there's some logic elsewhere that is not correctly displaying the tasks.