Having understood how Backbone.js communicates with the server, I'm now having trouble with Backbone.View.render().
My javascript code is this:
var myObject = Backbone.Model.extend( {
fetch: function (options) {
// some modifications
}
});
var Templates = myObject.extend({
urlRoot: 'templates/load.php',
initialize: function() {
this.fetch();
}
});
var appTemplates = new Templates();
load.php loads all template files and transforms them to one JSON object that is then returned to the client. So appTemplates will have all my Mustache.js templates ready for the page.
To test that, I created a 'main' template and a View:
var Output = Backbone.View.extend({
template: function() {
return appTemplates.get('main');
},
render: function() {
var rendered = Mustache.to_html(this.template(), this.model.toJSON() );
console.log( rendered ); // has exactly the data I want.
this.$el.html( rendered ); // <body> ... </body> remains empty
$('body').html( rendered ); // works fine.
return this;
},
});
var skeleton = new Output({ el: 'body', model: SomeModelData });
skeleton.listenTo(appTemplates, 'change', skeleton.render);
So why doesn't this.$el.html() work? I thought, this.$el is just a shortcut for $(this.el) but this.el is undefined, regarding the output of console.log (I did not define it? Thought I did...) while this.model works just fine.
The initial HTML is not very spectacular:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="./javascript/jquery-2.1.4.js" ></script>
<script src="./javascript/underscore.js"></script>
<script src="./javascript/backbone.js" ></script>
<script src="./javascript/mustache.min.js"></script>
<script src="./javascript/js.js"></script>
<title></title>
</head>
<body>
</body>
</html>
There is another issue with the 'main' string in in the View constructor. If I send 'main' as a value to the constructor ( { tpl: 'main', ... } ) tpl remains undefined.
What am I doing wrong here?
Edit: Problem solved
As it seems, the problem was that my js-file was included within the <head>...</head> of the html but it needs to be included within <body>...</body> to work as expected. If someone knows a reason for this I would love to hear about it.
Related
I am working in backbone.js. In the following code I am making a call to the Nutritionix API in order to populate my collection with the JSON response. I am having trouble populating my collection and appending the result as a list. I am doing this in order to test if my collection has been properly populated and in order to test that it will append to the page. However when I test the code out in the browser I don't see the field[brand_name] attribute appended to the page. Is my collection properly populated? How can I see the aformentioned attribute appended to the page? What is wrong with my code?
Here is my Javascript:
$(function(){
var SearchList = Backbone.Collection.extend({
url: "https://api.nutritionix.com/v1_1/search/taco?results=0%3A20&cal_min=0&cal_max=50000&fields=item_name%2Cbrand_name%2Citem_id%2Cbrand_id&appId=26952a04&appKey=78e2b31849de080049d26dc6cf4f338c",
initialize: function(){
this.bind("reset", function(model, options){
console.log("Inside event");
console.log(model);
});
}
});
var terms = new SearchList();
terms.fetch({
success: function(response,xhr) {
console.log("Inside success");
console.log(response.toJSON());
},
ERROR: function (errorResponse) {
console.log(errorResponse)
}
});
// The main view of the application
var App = Backbone.View.extend({
// Base the view on an existing element
el: $('.container'),
initialize: function(){
this.listenTo(this.model, 'sync', this.render);
// Cache these selectors
// this.total = $('#total span');
this.list = $('#listing');
},
render: function(){
// Calculate the total order amount by agregating
// the prices of only the checked elements
terms.each(function(term){
this.list.append("<li>"+ term.get('field[brand_name]')+"</li>");
}, this);
}
});
});
Here is my HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Interactive Food Guide</h1>
<div>
<input type="text" id="searchBox"> <br/><br/>
</div>
<ul id="listing"></ul>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Backbone and Underscore -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.1/backbone-min.js"></script>
<!-- apps functionality -->
<script src="js/app.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I can see some errors in the code:
JSON returned by url is an object, and what you should charge in the collection is the array "hits" that is inside the object. The logic of this process is defined in the method "parse" the collection.
The collection was declared out of view. When indicated in view to listen to your collection, you will have problems because the fetch method call before the view can be instantiated, so the view does not realize when the fetch is executed
Here is your code with comments.
$(function(){
var SearchList = Backbone.Collection.extend({
url: "https://api.nutritionix.com/v1_1/search/taco?results=0%3A20&cal_min=0&cal_max=50000&fields=item_name%2Cbrand_name%2Citem_id%2Cbrand_id&appId=26952a04&appKey=78e2b31849de080049d26dc6cf4f338c",
initialize: function(){
},
//** 1. Function "parse" is a Backbone function to parse the response properly
parse:function(response){
//** return the array inside response, when returning the array
//** we left to Backone populate this collection
return response.hits;
}
});
// The main view of the application
var App = Backbone.View.extend({
// Base the view on an existing element
el: $('.container'),
initialize: function(){
//** 2. the view must listen to an object inside in the view
//** so we create a new instance of SearchList and save it into model var of the view
this.model = new SearchList();
this.model.fetch();
this.listenTo(this.model, 'sync', this.render);
// Cache these selectors
// this.total = $('#total span');
this.list = $('#listing');
},
render: function(){
//** 2. Continue
var terms = this.model;
// Calculate the total order amount by agregating
// the prices of only the checked elements
terms.each(function(term){
this.list.append("<li>"+ term.get('fields')["brand_name"]+"</li>");
}, this);
}
});
//** Create an instance of the view to start the program
var foo = new App();
});
Regards
I think the main issue here is that you forgot to instantiate your app:
new App();
Secondly you need to refer to your data with the correct structure:
term.get('hits')
As term is the model, which contains an array of hits
Lastly, you need your collection in your view, and listen for the sync on your views collection:
this.listenTo(this.collection, 'sync', this.render);
I updated your app.js like so:
$(function(){
var SearchList = Backbone.Collection.extend({
url: "https://api.nutritionix.com/v1_1/search/taco?results=0%3A20&cal_min=0&cal_max=50000&fields=item_name%2Cbrand_name%2Citem_id%2Cbrand_id&appId=26952a04&appKey=78e2b31849de080049d26dc6cf4f338c",
initialize: function(){
this.bind("reset", function(model, options){
console.log("Inside event");
console.log(model);
});
}
});
// The main view of the application
var App = Backbone.View.extend({
// Base the view on an existing element
el: $('.container'),
initialize: function () {
this.collection = new SearchList();
this.collection.fetch({
success: function (response, xhr) {
console.log("Inside success");
console.log(response.toJSON());
},
ERROR: function (errorResponse) {
console.log(errorResponse)
}
});
this.listenTo(this.collection, 'sync', this.render);
// Cache these selectors
// this.total = $('#total span');
this.list = $('#listing');
},
render: function(){
var context = this;
this.collection.each(function (term) {
_.each(term.get('hits'), function (item) {
context.list.append("<li>" + item.fields.brand_name + "</li>");
});
}, this);
}
});
new App();
});
The correct way is not to use var context = this; but an element on your view. I just wanted to point you in the right direction :-)
This question already has an answer here:
Unable to display Todo Collection on the page
(1 answer)
Closed 8 years ago.
In the below code, unable to render 'TodoList'. Seems like fetching taking time and so displaying '0' and <div id="demo"></div> before only.
and Iam not sure why '3' and 'Descriptions' got displayed later. All I need is to display 'Descriptions List' in the page. Iam able to get data from server but somehow not able to display as soon as the data arrived. Please tell me what changes need to do in the below code?
<html>
<head>
<link rel="stylesheet"
href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
</head>
<body>
<div id="demo"></div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script type="text/javascript">
var TodoItem = Backbone.Model.extend({
urlRoot: 'api',
})
var TodoCollection = Backbone.Collection.extend({
model: TodoItem,
url: 'api/todos'
})
var TodoView = Backbone.View.extend({
template: _.template('<h3> ' +'<input type=checkbox ' +'<% if(status === "complete") print("checked") %>/>' +' <%= description %></h3>'),
render: function(){
this.$el.html(this.template(this.model.toJSON()))
}
})
var TodoListView = Backbone.View.extend({
initialize: function(){
this.listenTo(this.collection,'reset',this.render)
this.collection.fetch({reset:true})
},
render: function(){
console.log(this.collection.length)
this.collection.forEach(this.addOne,this)
},
addOne: function(todoItem){
console.log(todoItem.get('description'))
var todoView = new TodoView({model: todoItem})
this.$el.append(todoView.render())
}
})
var todoItem = new TodoItem()
var todoList = new TodoCollection()
var todoListView = new TodoListView({el: '#demo', collection: todoList})
todoListView.render()
console.log(todoListView.el)
</script>
</body>
</html>
Here is the CONSOLE output Iam getting:
0
<div id="demo"></div>
3
pick up cookies
Milk
Cookies
For starters you might want to take out the {reset: true} from your fetch.
A fetch wil automatically clear the model/collection anyway.
Please also use semicolons at the end of your command, not using them will let the browser interpret where the semicolon should be. This takes time and is error prone (the browser might just place it where you didn't think it would).
if this does not work you might want to do add the fetch into the render doing this:
render: function(){
var that = this;
this.collection.fetch().done(function(data) {
console.log(that.collection.length);
that.collection.forEach(that.addOne,that);
});
},
What also might work, but you need to test this, I personally always use the one above:
render: function(){
this.collection.fetch().done(function(data) {
console.log(this.collection.length);
this.collection.forEach(this.addOne,this);
}, this);
},
and Iam not sure why '3' and 'Descriptions' got displayed later - Because it the result of a async Ajax request.
now, try to change your code (watch comment):
var TodoView = Backbone.View.extend({
template: _.template('<h3> ' +'<input type=checkbox ' +'<% if(status === "complete") print("checked") %>/>' +' <%= description %></h3>'),
clearItem : function(){
this.$el.find("h3").remove();
},
render: function(){
//all DOM manipulation in view
this.$el.append(this.template(this.model.attributes));
return this;
}
})
var TodoListView = Backbone.View.extend({
initialize: function(){
// split "reset" event and "add" event
this.listenTo(this.collection,'reset',this.removeAll);
this.listenTo(this.collection,'add',this.addOne);
this.collection.fetch({reset:true});
},
removeAll : function(){
//method to remove all element from view
//your problem is that this event will fire before ajax request done
console.log("reset!");
var todoView = new TodoView();
todoView.clearItem();
},
addOne: function(todoItem){
//fire when a model in the collection change (automatic after fetch result) for each model.
console.log("add ITEM:",todoItem);
var todoView = new TodoView({model: todoItem})
todoView.render();
}
});
NOTE: Remove todoListView.render() in your code.
Sorry but, my english is too bad. I do not have time to explain better. Try if my code work
EVENTS in backbone: http://backbonejs.org/#Events
FETCH in collection: http://backbonejs.org/#Collection-fetch
RENDER a view: http://backbonejs.org/#View-render
I was trying to build a simple list with append widget as an Emberjs component.
The following is the code I used:
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0/ember.min.js"></script>
<meta charset=utf-8 />
<title>Ember Component example</title>
</head>
<body>
<script type="text/x-handlebars" id="components/appendable-list">
<h2> An appendable list </h2>
<ul>
{{#each item in myList}}
<li> {{item}} </li>
{{/each}}
</ul>
{{input type="text" value=newItem}}
<button {{action 'append'}}> Append Item </button>
</script>
<script type="text/x-handlebars">
{{appendable-list}}
{{appendable-list}}
</script>
</body>
</html>
Javascript:
App = Ember.Application.create();
App.AppendableListComponent = Ember.Component.extend({
theList: Ember.ArrayProxy.create({ content: [] }),
actions: {
appendItem: function(){
var newItem = this.get('newItem');
this.get('theList').pushObject(newItem);
}
}
});
In that case, the list is shared between the two instances (that is, appending in one appends in the other)
Here is the JsBin to check it out: http://jsbin.com/arACoqa/7/edit?html,js,output
If I do the following, it works:
window.App = Ember.Application.create();
App.AppendableListComponent = Ember.Component.extend({
didInsertElement: function(){
this.set('myList', Ember.ArrayProxy.create({content: []}));
},
actions: {
append: function(){
var newItem = this.get('newItem');
this.get('myList').pushObject(newItem);
}
}
});
Here is the JsBin: http://jsbin.com/arACoqa/8/edit?html,js,output
What am I doing wrong? Thanks in advance!
After you declare the component, each time you use it in your template a new instance will be created, and most importantly the init hook will also be called every time a new instance is instantiated, therefore the most secure way to have different myList arrays would be to use the component init hook, to initialize the array, so try the following:
App.AppendableListComponent = Ember.Component.extend({
myList: null,
init: function(){
this._super();
this.set('myList', Ember.ArrayProxy.create({content: []}));
},
actions: {
append: function(){
var newItem = this.get('newItem');
this.get('myList').pushObject(newItem);
}
}
});
Also important is to call this._super(); inside init and everything will work as expected.
See here for a working demo.
Hope it helps.
When you use extend(hash) any value present in the hash, will be copied to any created instance. And because array is a object, your reference will be the same across the created objects:
App.MyObject = Ember.Object.extend({ text: [] });
obj1 = App.MyObject.create();
obj2 = App.MyObject.create();
obj1.get('text') === obj2.get('text') // true
obj1.get('text').pushObject('lorem');
obj1.get('text'); // ["lorem"]
obj2.get('text').pushObject('ipsum');
obj2.get('text'); // ["lorem", "ipsum"]
The didInsertElement is called for each new view created, and each view is a diferent instance. So with your implementation you always will have a new Ember.ArrayProxy instance for each view, then no shared state exist:
didInsertElement: function() {
// each call for this method have a diferent instance
this.set('myList', Ember.ArrayProxy.create({content: []}));
}
In my app, the <body> tag contains just a single <script type="text/x-handlebars> tag which contains all my views. Sproutcore 2.0 nicely adds a jQuery on-document-ready handler that parses those templates and renders them back into the DOM.
I'd like to call a function on one of the views as soon as it's rendered. The problem is that the re-insertion happens asynchronously, so I don't know when the view is available.
Example
Page
<body>
<script type="text/x-handlebars">
...
{{view "MyApp.TweetInputView"}}
...
</script>
</body>
View:
MyApp.TweetInputView = SC.View.extend({
init: function() {
// act like a singleton
MyApp.TweetInputView.instance = this;
return this._super();
},
focus: function() {
...
this.$().focus();
}
});
Initializer
// if the URL is /tweets/new, focus on the tweet input view
$(function() {
if (window.location.pathname === '/tweets/new') {
// doesn't work, because the view hasn't been created yet:
MyApp.TweetInputView.instance.focus();
}
});
I've also tried SC.run.schedule('render', function() { MyApp.TweetInputView.instance.focus(); }, 'call'); in the hopes that Sproutcore would run that after all the view rendering and insertion, but that does not seem to be the case.
Try this:
MyApp.TweetInputView = SC.View.extend({
didInsertElement: function() {
console.log("I've been rendered!");
}
});
Hope you can have a quick look at what I'm doing here. Essentially, am I doing it right?
Live demo of it here too: http://littlejim.co.uk/code/backbone/messing-around/
I just wanted to get a solid understanding in Backbone before I go too wild. So this is a simple demonstration of creating a collection from a JSON object, passing it to a view and handling simple events. But am I approaching this right? What can I do that's better?
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Showing a simple view with events</title>
<script type="text/javascript" src="../../media/scripts/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="../../media/scripts/underscore-min.js"></script>
<script type="text/javascript" src="../../media/scripts/backbone-min.js"></script>
<script type="text/javascript" src="application.js"></script>
</head>
<body>
<header>
<h1>Showing views from a collection and basic events</h1>
<p>The list below is made from JSON, passed to the view as a collection and has basic events</p>
</header>
<article>
</article>
</body>
</html>
Here is the JavaScript I currently have. I just need to know if I'm approaching this correctly?
window.App = {
// namespaces
Controller: {},
Model : {},
Collection : {},
View : {},
// code that starts when the app is first fired
initialize : function () {
var collection = new App.Collection.Inputs([
{title: "Item 1"},
{title: "Item 2"},
{title: "Item 3"}
]);
var view = new App.View.InputSet({collection: collection});
$('article').html(view.render().el);
}
}
/*
Collection: Inputs */
App.Collection.Inputs = Backbone.Collection.extend();
/*
View: _Input */
App.View._Input = Backbone.View.extend({
events: {
"click a": "close"
},
// called as soon as a view instance is made
initialize: function() {
// this makes the render, clear etc available at this
// if not setting this, both render() and clear() method will not have themselves in this
_.bindAll(this, "render", "close");
},
// backbone required method, which renders the UI
render: function() {
// this is using underscore templating, which can be passed context
$(this.el).html(_.template('<p><%=title%> [close]</p>', this.model.toJSON()));
return this;
},
close: function() {
// removes the UI element from the page
$(this.el).fadeOut(300);
return false; // don't want click to actually happen
}
});
/*
View: InputSet, uses _Input */
App.View.InputSet = Backbone.View.extend({
events: {
'click a': 'clear'
},
initialize: function() {
// this makes the render, clear etc available at this
// if not setting this, both render() and clear() method will not have themselves in this
_.bindAll(this, "render");
},
// backbone required method, which renders the UI
render: function() {
var that = this;
views = this.collection.map(function(model) {
var view = new App.View._Input({model: model});
$(that.el).append(view.render().el);
return view;
});
$(that.el).append('[clear]');
return this;
},
clear: function() {
$(this.el).find('p').fadeOut(300);
}
});
// wait for the dom to load
$(document).ready(function() {
// this isn't backbone. this is running our earlier defined initialize in App
App.initialize();
});
This looks fine to me. However, I found that things can get tricky once you start doing non-trivial stuff: complex views, nested collections etc.
One thing that could be done differently is that instead of generating input views using collection.map you could bind the collection's add event to a function that generates an _Input view for that item in the collection instead. So you'd have something like this in your InputSet view:
initialize: function() {
_.bindAll(this, "addInput", "removeInput");
this.collection.bind("add", this.addInput);
this.collection.bind("remove", this.removeInput);
}
addInput: function(model) {
var view = new App.View._Input({model: model});
$(this.el).append(view.render().el);
}
I looks good to me - really the only thing I would suggest is that you bind the collection's 'change' event to _Input.render that way changes to your collection automatically re-render the view:
// called as soon as a view instance is made
initialize: function() {
_.bindAll(this, "render", "close");
this.collection.bind('change', this.render);
},
Other than that I think it looks good!