I still trying to remove (destroy) model from my collection. Data is groupedBy and rendered into accordion style. But when I click to X in my console is notice :
Uncaught Uncaught TypeError: Cannot call method 'destroy' of undefined
(function() {
window.App = {
Models: {},
Collections: {},
Views: {},
Router: {}
};
window.vent = _.extend({}, Backbone.Events);
})();
// !models.js
App.Models.Item = Backbone.Model.extend({});
// !collections.js
App.Collections.Items = Backbone.Collection.extend({
model: App.Models.Item,
url: 'api/items.json'
});
// !views.js
App.Views.Items = Backbone.View.extend({
el: '#items',
events: {
'click .cccc':'deleteItem',
},
deleteItem: function() {
this.model.destroy();
},
initialize: function() {
this.listenTo( this.collection, "change", this.render );
this.template = _.template( document.getElementById('productsCategoriesTemlate').innerHTML );
this.render();
this.$el.accordion({ animate: 0 });
},
getGroups : function(){
return _.groupBy(this.collection.toJSON(), 'category');
},
render: function() {
this.el.innerHTML = this.template({ data : this.getGroups() });
},
addOne: function(item) {
// ????????????
}
});
App.Views.Item = Backbone.View.extend({
deleteItem: function() {
this.model.destroy();
},
// ???????????
});
// !router.js
App.Router = Backbone.Router.extend({
routes: {
'':'index',
},
index: function() {
console.log('index page !');
},
});
new App.Router;
Backbone.history.start();
App.items = new App.Collections.Items;
App.items.fetch().then(function() {
new App.Views.Items({ collection: App.items });
});
template :
<script id="productsCategoriesTemlate" type="text/template">
<% _.each( data, function( category, i ){ %>
<h3 class="category-name"><%= i %></h3>
<div><% _.each( category, function( item ){ %>
<li class="product"><%= item.title %><p style="float:right;" class="cccc">X</p></li>
<% }) %>
</div>
<% }) %>
</script>
Where do you instantiate Apps.Views.Items? Is this your 'collection view'? If this view is representing your collection, you have to somehow pass or reference the model on 'deleteItem'.
App.Views.Items does not represent a single model, so this.model would be incorrect.
UPDATE
You should have a separate view for each item, such as App.Views.Item, and loop through and create this view for each model in App.Views.Items' collection.
2nd UPDATE
Yeah, you are getting it. Here's some sample code I threw together (I haven't tested it, so you might have to adjust it, but it gives a good idea. The template rendering syntax might be incorrect as I don't usually do it manually).
App.Views.Items = Backbone.View.extend({
render: function() {
this.collection.each(function(model) {
var view = new App.Views.Item({ model: model });
this.$el.append(view.render().el);
});
},
});
App.Views.Item = Backbone.View.extend({
template: _.template($('#itemViewTemplate')),
render: function() {
this.$el.html(this.template(this.model.toJSON()));
},
});
App.items = new App.Collections.Items;
App.items.fetch().then(function() {
var items = new App.Views.Items({ collection: App.items });
$('body').append(items.render().$el);
});
By the way, once you get the hang of Backbone and how it works, you should try out Marionette.js. It makes all of this kind of thing much simpler.
Related
I can not understand how to show a single product. When I want to show product page (model view - app.ProductItemView in productPageShow) I get "Uncaught TypeError: Cannot read property 'get' of undefined at child.productPageShow (some.js:58)" >> this.prod = this.prodList.get(id);
Here is my code:
// Models
var app = app || {};
app.Product = Backbone.Model.extend({
defaults: {
coverImage: 'img/placeholder.png',
id: '1',
name: 'Unknown',
price: '100'
}
});
app.ProductList = Backbone.Collection.extend({
model: app.Product,
url: 'php/listProducts.php'
});
// Views
app.ProductListView = Backbone.View.extend({
el: '#product-list',
initialize: function() {
this.collection = new app.ProductList();
this.collection.fetch({ reset: true });
this.render();
this.listenTo(this.collection, 'reset', this.render);
},
render: function() {
this.collection.each(function(item) {
this.renderProduct(item);
}, this);
},
renderProduct: function(item) {
app.productView = new app.ProductView({
model: item
});
this.$el.append(app.productView.render().el);
}
});
app.ProductItemView = Backbone.View.extend({
tagName: 'div',
template: _.template($('#productPage').html()),
render: function(eventName) {
$(this.el).html(this.template(this.model.toJSON()));
return this;
}
});
app.ProductView = Backbone.View.extend({
tagName: 'div',
template: _.template($('#productTemplate').html()),
render: function() {
this.$el.html(this.template(this.model.attributes));
return this;
}
});
// Router
app.Router = Backbone.Router.extend({
routes: {
"list": 'list',
"product/:id": "productPageShow"
},
initialize: function() {
this.$content = $("#product-list");
},
list: function() {
this.prodList = new app.ProductList();
this.productListView = new app.ProductListView({ model: this.prodList });
this.prodList.fetch();
this.$content.html(app.productListView.el);
},
productPageShow: function(id) {
this.prod = this.prodList.get(id);
this.prodItView = new app.ProductItemView({ model: this.prod });
this.$content.html(this.prodItView.el);
}
});
$(function() {
new app.Router();
Backbone.history.start();
});
There are some conceptual problems with the code, without getting into too much details, there are a lot of things happening in the Router that don't belong there, but for a (currently) non-complex application that's manageable.
I'll focus on the app.Router file because that's the culprit of your problems most probably.
routes: {
"list": 'list',
"product/:id": "productPageShow"
}
Let's start with the basics, when you define a list of routes in Backbone Router( or any other Router in other frameworks ) you give a route a key that will correspond to something in the URL that the Router will recognize and call a callback method.
If you navigate your browser to:
http://your-url#list
Backbone will call the list callback
Similarly:
http://your-url#product/1
Backbone will call productPageShow callback
Thing to know: ONLY ONE ROUTE CALLBACK CAN EVER BE CALLED! The first time a Backbone Router finds a matching route it will call that callback and skip all others.
In your code you're relying on the fact that this.prodList will exist in productPageShow method but that will only happen if you first go to list route and then to product/{id} route.
Another thing .. in your listcallback in the Router you set a model on the ProductListView instance .. but that model is neither user, nor is it a model since this.productList is a Backbone.Collection
Additionally, you need to know that fetch is an asynchronous action, and you're not using any callbacks to guarantee that you'll have the data when you need it ( other than relying on the 'reset' event ).
So this would be my attempt into making this workable:
// Models
var app = app || {};
app.Product = Backbone.Model.extend({
defaults: {
coverImage: 'img/placeholder.png',
id: '1',
name: 'Unknown',
price: '100'
}
});
app.ProductList = Backbone.Collection.extend({
model: app.Product,
url: 'php/listProducts.php'
});
// Views
app.ProductListView = Backbone.View.extend({
el: '#product-list',
initialize: function() {
this.render();
this.listenTo(this.collection, 'reset', this.render);
},
render: function() {
this.collection.each(function(item) {
this.renderProduct(item);
}, this);
},
renderProduct: function(item) {
app.productView = new app.ProductView({
model: item
});
this.$el.append(app.productView.render().el);
}
});
app.ProductItemView = Backbone.View.extend({
tagName: 'div',
template: _.template($('#productPage').html()),
render: function(eventName) {
$(this.el).html(this.template(this.model.toJSON()));
return this;
}
});
app.ProductView = Backbone.View.extend({
tagName: 'div',
template: _.template($('#productTemplate').html()),
render: function() {
this.$el.html(this.template(this.model.attributes));
return this;
}
});
// Router
app.Router = Backbone.Router.extend({
routes: {
"": "list",
"product/:id": "productPageShow"
},
initialize: function() {
this.$content = $("#product-list");
},
list: function() {
this.prodList = new app.ProductList();
this.productListView = new app.ProductListView({ collection: this.prodList });
this.prodList.fetch({reset:true});
this.$content.html(app.productListView.el);
},
productPageShow: function(id) {
try {
this.prod = this.prodList.get(id);
this.prodItView = new app.ProductItemView({ model: this.prod });
this.$content.html(this.prodItView.el);
} catch (e) {
// Navigate back to '' route that will show the list
app.Router.navigate("", {trigger:'true'})
}
}
});
$(function() {
app.Router = new app.Router();
Backbone.history.start();
});
So with a bit of shooting in the dark without the complete picture, this is what changed:
ProductListView is no longer instantiating ProductList collection that is done in the list callback in Router
Changed the route from 'list' to '', that will guarantee that the list is shown immediately
In case there are no product data available in productPageShow navigate back to list
I'm trying to make the View dynamic as when someone touches the item, but using the '<%= myClassName %>' inside the View doesn't work. I can't use this technique inside the HTML file as it would draw another element and that's not the idea. Also I have set a template but it has nothing on it. I just did that to relate jQuery Mobile into a data-role="content" and render the view inside the content. Any ideas?
Here is what I have:
app.js
var TodoItem = Backbone.Model.extend({
toggleStatus: function(){
if(this.get('status') === 'incomplete'){
this.set({'status': 'complete'});
} else {
this.set({'status': 'incomplete'});
}
this.save();
// PUT /TODOS/1
}
});
var TodoItems = Backbone.Collection.extend({
model: TodoItem,
localStorage: new Backbone.LocalStorage("button"),
initialize: function () {
this.on('remove', this.hideModel, this);
},
hideModel: function (model) {
model.trigger('hide');
}
});
var TodosView = Backbone.View.extend({
initialize: function () {
this.collection.on('add', this.addOne, this);
},
addOne: function (todoItem) {
var todoView = new TodoView({ model: todoItem });
this.$el.append(todoView.render().el);
},
addAll: function () {
this.collection.forEach(this.addOne, this);
},
render: function() {
this.collection.forEach(this.addOne, this);
this.addAll;
return this;
}
});
var TodoView = Backbone.View.extend({
tagName: 'span',
// THIS IS THE MAIN PROBLEM
className: '<%= status %>',
// END COMMENT
template: _.template( $('#personTemplate').html() ),
events: {
"touchstart": "toggleStatus",
"touchend": "toggleStatus"
},
toggleStatus: function () {
this.model.toggleStatus();
},
remove: function(){
this.$el.remove();
},
initialize: function(){
this.render();
this.model.on('change', this.render, this);
this.model.on('destroy', this.remove, this);
this.model.on('hide', this.remove, this);
},
render: function () {
var attributes = this.model.toJSON();
this.$el.html(this.template(attributes));
return this;
}
});
var todoItems = new TodoItems([
{
description: 'Jeffrey Way',
status: "incomplete",
id: 1
},
{
description: 'John Doe',
status: "incomplete",
id: 2
},
{
description: 'Sally Doe',
status: "incomplete",
id: 3
}
]);
var todosView = new TodosView({
el: $('#elem'),
collection: todoItems
});
todosView.render().el
You can do
this.$el.addClass(this.model.get('status'))
inside the view's render method.
Trying to use a template value in the view code doesn't make any sense; those properties are set when the object is parsed, so how would it know which object to fetch the status from?
The best thing todo, if i understand correctly, is to listen to the change:status in your view, and adding/removing a class to your view according to the value of status.
in your initialize of TodoView:
this.listenTo(this.model, 'change:status', this.changeStatus);
in your TodoView declare:
changeStatus : function(model, value, options)
{
// add a class or toggle it or change something in the view..
}
Solution 1
var TodoView = Backbone.View.extend({
tagName: 'span',
...})
var x=new TodoView ({className:'sample'});
Solution 2
Use a template!
var TodoView = Backbone.View.extend({
template="<span class=<%-className%>>Some Stuff Goes Here</span>",
...
render:function(){
var $ele=$(_.template(this.template,{className:'sample'}));
this.$el.replaceWith($ele);
this.$el=$ele;
this.delegateEvents(); //inbuilt-method, to re-bind all event handlers
});
Making a Rails app with Backbone on the frontend. There are two Backbone models, Publications and Articles. I am having issues rendering one of my Backbone views. Here is the code that is giving me an issue:
SimpleGoogleReader.Views.PublicationsIndex = Backbone.View.extend({
template: JST['publications/index'],
el: '#publication',
events:{
'click #new_feed': 'createFeed'
},
initialize: function() {
this.listenTo(this.model, "sync", this.render);
},
render: function(){
this.$el.html( this.template({publications: this.model.toJSON()}) );
return this;
},
createFeed: function(e){
e.preventDefault();
var feed_url = $('#new_feed_name').val();
// var that = this;
this.model.create(
{url: feed_url},
{ success: function(data){
$.post('/articles/force_update', {url: feed_url, publication_id: data.id}, function(data){
});
}
}
);
}
});
I know the render function is getting called and when I console.log(this.model.toJSON()) it does not return the JSON objects. However the render function works just fine within the Articles View:
SimpleGoogleReader.Views.ArticlesIndex = Backbone.View.extend({
template: JST['articles/index'],
el: '#article',
initialize: function() {
this.listenTo(this.model, "sync", this.render);
},
render: function(){
console.log(this.model.toJSON());
this.$el.html( this.template({articles: this.model.toJSON()}) );
return this;
}
});
** Edit ** here is my router where I instantiate the views:
SimpleGoogleReader.Routers.Publications = Backbone.Router.extend({
routes: {
'': 'home',
'all_articles': 'get_all_articles',
'publications/:id': 'articles_by_id',
'publications/:id/delete': 'delete_publication'
},
home: function(){
var publications = new SimpleGoogleReader.Collections.Publications();
var articles = new SimpleGoogleReader.Collections.Articles();
var pubIndex = new SimpleGoogleReader.Views.PublicationsIndex({model: publications});
var artIndex = new SimpleGoogleReader.Views.ArticlesIndex({model: articles});
articles.listenTo(publications, "sync", function(){
articles.fetch( {success: function(){}} );
});
publications.fetch();
},
Any ideas on where the discrepancy may lie?
I'm new to backbone.js and I worked through Jeffery Way's tutorial with Laravel and Backbone. I currently have a list of teams displayed and attached their ids from the database. I set up an event so when I click on a team it sends a get request to laravel and returns all users that have that team id.
The request works great, except I'm stuck trying to generate a usersview. I can't pull out any data from the collection in the App.Views.Users other than an id.
Am I doing this correctly?
View.js
//Global App View
App.Views.App = Backbone.View.extend({
initialize: function() {
var allTeamsView = new App.Views.Teams({ collection: App.teams }).render();
}
});
App.Views.Teams = Backbone.View.extend({
tagName: 'div',
events: {
"click a" : "teamClicked"
},
teamClicked: function(e){
e.preventDefault();
var team_id = e.target.id;
teamusers = new App.Models.Team({id: team_id});
collection = new App.Collections.Teams([teamusers]);
teamusers.fetch();
view = new App.Views.Users({collection: collection, el: '#usersList'});
view.render();
return false;
},
attributes: function() {
return{
class: 'span2 admin teams',
id: 'inner-content-div'
};
},
render: function(){
this.collection.each( this.addOne, this );
return this;
},
addOne: function(team){
var teamView = new App.Views.Team({model: team});
this.$el.append(teamView.render().el);
}
});
// Single Team View
App.Views.Team = Backbone.View.extend({
tagName: 'li',
template: template('allTeamsTemplate'),
attributes: function() {
return{
id: this.model.get('id')
};
},
render: function(){
this.$el.html( this.template( this.model.toJSON() ));
return this;
}
});
App.Views.Users = Backbone.View.extend({
tagName: 'ul',
render: function(){
this.collection.each( this.addOne, this );
console.log(collection);
return this;
},
addOne: function(user){
var userView = new App.Views.User({model: user });
this.$el.append(userView.render().el);
}
});
// Single User View
App.Views.User = Backbone.View.extend({
tagName: 'li',
template: template('allUsersTemplate'),
attributes: function() {
return{
id: this.model.get('id')
};
},
render: function(){
this.$el.html( this.template( this.model.toJSON() ));
return this;
}
});
TeamController.php
public function show($id)
{
return Team::find($id)->user;
}
Index.Blade.php
<div class="teamContainer" id="demo"></div>
<ul class="userContainer" id="usersList"></ul>
<script type="text/template" id="allUsersTemplate">
<p><%= id %></p>
</script>
<script type="text/template" id="allTeamsTemplate">
<a id='<%= teamNum %>' ><%= teamName %></a>
</script>
I got it working. The problem was with my event.
View.js
teamsUserList: function(e){
e.preventDefault();
var team_id = e.target.id;
var collection = new App.Collections.TeamsUsers([], {id: team_id});
collection.fetch().complete(function() {
var view= new App.Views.Users({collection: collection});
$('#usersList').append(view.render().el);
});
},
Hey guys here is my js file and I am taking error message about each function at line:24 and I do not know why I couldnt find whats wrong. I am just trying to see the list of items on the console.log panel but it does not even give me list on the html page.
(function() {
window.App = {
Models: {},
Collections: {},
Views: {}
};
window.template = function(id){
return _.template( $('#' + id).html() );
};
App.Models.Task = Backbone.Model.extend({});
App.Collections.Task = Backbone.Collection.extend({
model: App.Models.Task
});
App.Views.Tasks = Backbone.View.extend({
tagName: 'ul',
render: function(){
this.collection.each( this.addOne, this);
return this;
},
addOne: function(task){
//creating new child view
var taskView = new App.Views.Task({ model: task });
//append to the root element
this.$el.append(taskView.render().el);
}
});
App.Views.Task = Backbone.View.extend({
tagName: 'li',
template: template('taskTemplate'),
events: {
'click .edit': 'editTask'
},
editTask: function(){
alert('you are editing the tas.');
},
render: function(){
var template = this.template( this.model.toJSON() );
this.$el.html(template);
return this;
}
});
var tasksCollection = new App.Views.Task([
{
title: 'Go to the store',
priority: 4
},
{
title: 'Go to the mall',
priority: 3
},
{
title: 'get to work',
priority: 5
}
]);
var tasksView = new App.Views.Tasks({ collection: tasksCollection });
$('.tasks').html(tasksView.render().el);
})();
You're creating a view instance as though it was a class:
App.Views.Tasks = Backbone.View.extend({ /* ... */ });
var tasksCollection = new App.Views.Task([
{
title: 'Go to the store',
priority: 4
},
//...
and then you create another instance of that view and hand it tasksCollection as though it really was a collection:
var tasksView = new App.Views.Tasks({ collection: tasksCollection });
But views and collections are different things and only collection's have an each method (unless you add an each to your view of course).
You want to create tasksCollection as an App.Collections.Task:
var tasksCollection = new App.Collections.Task([
{
title: 'Go to the store',
priority: 4
},
//...
Hi this is happening cus your each method not able to find the collection. As well the singular Task to Tasks
At this line:
Change this
var tasksCollection = new App.Views.Task([
TO, this:
var tasksCollection = new App.Collections.Tasks([