node.js,backbone.js,express,handlebars.js,jade , Backbone Collection only fetched after executing alert


Backbone Collection only fetched after executing alert

Question:

Tag: node.js,backbone.js,express,handlebars.js,jade

Hey I am new to backbone and Handlebars and something strange is happening with my code that I cannot figure out. Basically my node app queries mongo for some data which is then used by backbone and handlebars to relay the data to the user. When I try to relay the data to the user by using the fetch method, I get an error from handlebars stating that I cannot call on the compile method because I passed undefined. The strange thing is that when I was debugging the code it seemed like the collection was never being created i.e no data being returned from the backend. But when I tried to alert the collection the data does get returned and displayed which is really confusing? Anyway below are a few snippets of my code, would love to know why this is happening, thanks.

Init.js - used to initialize the backbone router

$(function(){
new appRouter();
Backbone.history.start({pushState: true});
});

photoClient.js Used to define and manage model, collection & views

var photo = Backbone.Model.extend({
idAtrribute: "id",
});

var photoCollection = Backbone.Collection.extend({
model: photo,
url: "/api/gallery"

  });

var photoView = Backbone.View.extend({

tagName: "li",
className: "photo",
render: function(){
    var template = $("#illustrationTemplate").html();
    var compiled = Handlebars.compile(template);
    var html = compiled(this.model.attributes);
    this.$el.html(html);
    return this;

   }
 });

 var photoCollectionView = Backbone.View.extend({
 initialize: function(){
    this.listenTo(this.collection, "reset", this.render);
 },
 tagName: "ul",
 className: "photos",
 render: function(){
    this.$el.html("");
    this.collection.each(function(photo){
        var photoV = new photoView({model: photo});
        this.$el.append(photoV.render().el);
    }, this);
    return this;
  }
 });

 var appRouter = Backbone.Router.extend({
 routes: {
 "gallery": "illustration"
 },
 illustration: function() {
    var collection = new photoCollection();
    collection.fetch({reset: true});
    //IF I ADD THIS ALERT THE COLLECTION IS NOW DEFINED?
    alert(collection);
    console.log(collection);
    var view = new photoCollectionView({collection: collection});
    $(".app").html(view.render().el);   
 }
});

Illustration.jade

extends ../layout
block content
div.app
  script(id = "illustrationTemplate", type = "text/x-handlebars")
    {{image.created_at}}

Answer:

I'd guess that the problem is right here:

$(".app").html(view.render().el); 

As soon as you do that, everything that used to be inside <div class="app"> is gone. That includes your <script id="illustrationTemplate"> that you're using to store your template. Once your router's illustration method is called, $("#illustrationTemplate").html() will give you undefined and that view will no longer work.

You should store your templates inside <head> or at the very least outside of anything that your application will be writing to.


Related:


Socket.io client does not connect to server


node.js,express,socket.io
I am trying to make a Node.js app that will have an embedded chat. I am using socket.io to create that chat. I have attempted to set up my server / client, but the client does not seem to be connecting. I have my application to set log when sockets...

What type of database is the best for storing array or object like data [on hold]


database,node.js,sockets
I'm just curious what the best method would be if I'm trying to have a bot running on my Node server that I could play Blackjack against. But for multiple connected clients via sockets, each connected socket will have their own bot to play against but I need some way...

Is express similar to grunt? what is the difference? what are the advantages of express over grunt?


node.js,express,gruntjs,mean-stack
I've been working on node,grunt,bower and yeoman from couple of months. I came across MEAN stack applications, in which expressjs is providing the server environment(my understanding). Are both grunt and express similar? Requesting for some helpful link on express and MEAN stack. ...

I'd like to count the documents with the matching “name” property AND group them by “name” at the same time


node.js,mongoose,group-by
Let's say I have a User collection: schema = mongoose.Schema({ firstName: { type: String, required: true }, ... ... }); module.exports = mongoose.model("User", schema); I would like to write a mongoose query that would count how many users go by the name Mike, Andy, Jerry... In other words, I would...

Create n:m objects using json and sequelize?


javascript,json,node.js,sequelize.js
I am trying to learn sequelize, but am having trouble getting a n:m object created. So far I have my 2 models that create 3 tables (Store, Product, StoreProducts) and the models below: models/Store.js module.exports = (sequelize, DataTypes) => { return Store = sequelize.define('Store', { name: { type: DataTypes.STRING, },...

How to use promises to do series without duplicate code


node.js,promise,bluebird
I need execute a code in series, I need execute the same function N times Example // execute asynFunc 4 times in series object.asynFunc() .then(function() { return object.asynFunc(); }) .then(function() { return object.asynFunc(); }) .then(function() { return object.asynFunc(); }) I want execute the same function 100 times...

jQuery DataTables with Node.js


javascript,jquery,node.js,datatables,jquery-datatables
So i am trying to implement a pagination table with the datatables plugin, this is my first time using this plugin. I followed the documentation on the plugin and tried to get the values from the server through the use of Ajax, as per presented in the plugins documentation. I...

Node Server - Source Code accessible


node.js,express
I noticed that when i navigate to localhost:8080/server.js (where my server.js is the server-expressjs obviously) the code of my server is shown in the browser! Even, if i upload the application to openshift, i get the same result (you can test it): http://tickets-shkobba125.rhcloud.com/ http://tickets-shkobba125.rhcloud.com/server.js Is this a security issue? How...

node.js winston logger no colors with nohup


node.js,logging,nohup,winston
We are using winston logger in our project with the following transport settings: file: { filename: __base + '/log/server.log', colorize : true, timestamp : true, json : false, prettyPrint : true } If the application is started with nohup, log file is not colorized. It works only without nohup. nohup...

Add multiple rows from same model AngularJS


angularjs,node.js
Considering I have a list of users to add into my system and I don't want to do it one-by-one process. Then I want to see one user form (name, email, password fields) and by the end of the row i see the "add another row" button. By clicking on...

Sockets make no sense?


javascript,node.js,sockets
I'm using the 'ws' library for Node.js. I can write code that sends data from my server to my client, posting a date and time update, and closes the socket when I click a button; var wss = new WebSocketServer({server: server}); console.log("WebSocket server created"); wss.on('connection', function(socket) { // SEND DATE...

How to use a variable as an Object Key [MongoDB] [duplicate]


node.js,mongodb
This question already has an answer here: How to use a variable as a field name in mongodb-native findOne()? 1 answer I'm trying to use variable name given to me by my function, but its actually setting the object key equal to 'name' function addlist(name, item, id){ // Add...

websockets - reject a socket connection


node.js,sockets,websocket
I'm using ws as the socket library for my node.js library. so my question is, how can I reject a connection if the user doesn't pass the authorization process. var WebSocketServer = require('ws').Server; var wss = new WebSocketServer({port: 6969}); wss.on('connection', function(socket){ // if the socket.upgradeReq.headers.cookie doesn't exists, reject the client...

What does a [Function] (wrapped in square brackets) mean when inside of a javascript object?


javascript,node.js,javascript-objects
When running console.log on various functions, I'll find properties on the object that have a value of [Function: someFunctionName] in the value section. What does this mean? I want to be able to view the actual code of the function. I'm confused on what's actually being logged when I see...

node ssh2 shell unable to run apt-get install on remote machine


node.js
I'm doing a program in node.js to deploy my code from git to a server (Digital Ocean). I'm connecting to the server via ssh2 module and running commands via shell, like bellow: var Client = require('ssh2').Client; var conn = new Client(); conn.on('ready', function() { console.log('Client :: ready'); conn.shell(function(err, stream) {...

Emitting and receiving socket io within the same file


node.js,express,socket.io
I want to do something where I can set up a route to a link like /visit using app.get('/visit', function(req, res){}) etc. And inside that, I want to emit a message like socket.emit("event", "a message") and then inside my io.on("connection") function, be able to listen for event and return the...

nodejs head request isn't triggering events


node.js,http
Here's my code: var http = require('http'); var req = http.request( { host: 'example.com', method: 'HEAD', path: '/' }, function(res){ res.on('end',function(){ console.log('Ended'); }); res.on('finish',function(){ console.log('Finished'); }); res.on('close',function(){ console.log('Closed'); }); } ); req.end(); Strange thing about it is that it doesn't print anything. Takes longer than expected and exits. Is this...

NPM : how to just run post-install?


node.js,npm,package.json
Just a simple question : in my node.js project, how could I just run the postinstall script, without running install before ? FYI, this is my package.json : { "name": "gestionclientjs", ..., "dependencies": { ... }, "repository": {}, "devDependencies": { ... }, "engines": { "node": ">=0.10.0" }, "scripts": { "test":...

Error is not thrown inside a deferred method


node.js,exception-handling,deferred
Can somebody explain to me why my error is not thrown in my first example? And why it is when I use process.nextTick() ? var deferred = require('deferred'); // This code does not work. // Error seems to never been thrown and script kind of freeze without saying anything. deferred.resolve().then(function(){...

How do I run C# within a Node.js server application?


c#,node.js,server
I have a node.js application and a C# algorithm. The algorithm puts out 15 numbers that represent symbols on a digital slot machine. The node server is posting and getting data from Firebase and the digital slot machine is doing the same on the same table. My question is how...

Using TypeScript type definitions with Webstorm 10 [duplicate]


node.js,typescript,webstorm
This question already has an answer here: intellisense and code complete for DefinitelyTyped (TypeScript type definitions) on WebStorm IDE 2 answers I am trying to use Webstorm 10's new built-in TypeScript compiler. When compiling a simple Node.js file such as below, it gives a TS compilation error of "Error:(1,...

CSS Selector Equivalent Of jQuery.find in backbone.js?


javascript,jquery,backbone.js,selector
I have a Marionette view that has the following code: onRender: { $('#someDiv').find('a').click(function(){ // some code here }); } But I want to refactor to something like this: events: { 'click [selector here]': 'executeCode' }, executeCode: function() { // some code here } Is this possible?...

passing backbone collection to view


grails,backbone.js,handlebars
I'm just starting out with backbone / grails and i've been struggling to figure out how to get everything to work. I'm building a pricing configurator where a user selects a product type from radio group A and radio group B containing the quantity / pricing / discount data will...

Getting failed to load c++ bson extension error using Mongodb and Node.js


javascript,node.js,mongodb
I am getting the following error while trying to run server using Node.ja with Mongodb. Error: { [Error: Cannot find module '../build/Release/bson'] code: 'MODULE_NOT_FOUND' } js-bson: Failed to load c++ bson extension, using pure JS version { [Error: Cannot find module '../build/Release/bson'] code: 'MODULE_NOT_FOUND' } js-bson: Failed to load c++...

How to get my node.js mocha test running?


javascript,node.js,mocha,supertest
I have developed a service in node.js and looking to create my first ever mocha test for this in a seperate file test.js, so I can run the test like this: mocha test I could not figure out how to get the reference to my app, routes.js: var _ =...

Socket.IO server not receiving message from client


node.js,socket.io,mocha,bdd,expect.js
I'm playing around with Node, Socket.IO and BDD by creating a chat application. During one of the tests, I get a timeout error stating: Error: timeout of 2000ms exceeded. Ensure the done() callback is being called in this test. The affected test is it('#must be able to receive a message',...

Getting CROS Error even after adding header in node.js for Angular js


javascript,angularjs,node.js
I am trying to consume REST API from NODE JS for Angular js,even after adding cors header in my server code I am getting error XMLHttpRequest cannot load http://127.0.0.1:8085/issues. Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers. I am new to both Angular JS and Node JS. Node JS...

Replace nodejs for python?


python,node.js,webserver
i'm working in a HTML5 multiplayer game, and i need a server to sync player's movement, chat, battles, etc. So I'm looking for ways to use python instead nodejs, because i have I have more familiarity with python. The server is simple: var express = require('express'); var app = express();...

What does this line in NodeJs mean?


node.js
I'm wondering what does these require lines in NodeJs mean. var debug = require('debug')('morgan') var deprecate = require('depd')('morgan') I'm going through the index.js of morgan package in NodeJs. Normally require only has one parameter (package). ...

how can I import a file in node.js?


javascript,node.js
I have developed a node.js application and performing some validation with the use of a template. At the moment this 'template' is a local variable but I would like to store this in a file in my project. So this is the validation code: isvalid(req.body,template , function(err, validObj) { if...

Backbone render template in side el's nested id


javascript,jquery,backbone.js
I have my html setup like this. <div id="product-module"> <ul id="product"> <li><input name="product" type="radio"/></li> <li><input name="product" type="radio"/></li> <li><input name="product" type="radio"/></li> </ul> <table id="quantities"/> <script id="myTemplate" type="text/x-handlebars-template"> {{#each this}} <tr> <td class="quantity"> <label class="checked" for="quantity_{{id}}"> <input type="radio" value=""...

Is there a before() function in Protractor?


angularjs,node.js,automated-tests,protractor,hierarchy
I am aware there is a beforeEach() function which I am currently using. However, I would like to be able to run a before function for all my parent level 'describes' and not the 'it' functions within them. For example my test looks like this (with an x in front...

How to handle expressjs middleware request. post request remains pending made by dropzone


node.js,express,dropzone.js,multer
I am using dropzone to upload the file. On the server side I am using node and expressjs. I am also using multer as the file handling middleware. dropzone makes a call to one endpoint to save the file on the server. On the server side, I created an endpoint...

Socket.IO message doesn't update Angular variable


javascript,angularjs,node.js,sockets
I have a socket.io client-server setup with AngularJS running on the client. // Server.js var io = require('socket.io')(server); io.on('connection', function (socket) { socket.on('message', function (msg) { //console.log(msg); console.log(msg); io.emit('message', msg); }); }); As observed, it essentially emits a message events with the data stored in the variable msg. And then...

mongodb populate method not working


node.js,mongodb,model,populate,auto-populate
Here is my code for models var postSchema = new mongoose.Schema({ created_by: {type: Schema.ObjectId, ref:'User', autopopulate: true }, //should be changed to ObjectId, ref "User" created_at: {type: Date, default: Date.now}, text: String }); var userSchema = new mongoose.Schema({ username: String, password: String, //hash created from password created_at: {type: Date, default:...

Waiting for promises - code hangs


javascript,node.js,promise
I am using Javascript Promises for the first time and ran into something I don't understand. What I am trying to do is create a validation phase which runs around and checks things - eventually waiting for all promises to resolve. To do this, I create a validation promise: validate...

Access Node-Webkit App from other Application


node.js,node-webkit
Is it possible to call a function in nodewebkit from an external application? For example. I would like to decide whether the window is hidden or show through a external application or with applescript. ...

backbone stickit - reverting model changes


javascript,backbone.js,2-way-object-databinding
I'm now testing backbone stickit for two-way data binding. Is there a way to revert the changes, for example, while editing a model data through a form, the user press the cancel button, as in the pic below It seems the model was changed on the fly as we type...

After deploying to heroky scripts and css not available


node.js,heroku
I am new in heroku. Locally project works fine but after deploying vendor scripts files are not available. Their paths are redirected to main page. Here is the deployed version with errors https://salty-woodland-8424.herokuapp.com/. In nodeJs file i use var express = require('express'); var path = require('path'); var stylus = require('stylus');...

Error handling when uploading file using multer with expressjs


node.js,express,multer,busboy
I am using multer to save the file on server developed through express & nodejs. I am usign following code. var express = require('express'), multer = require('multer') var app = express() app.get('/', function(req, res){ res.send('hello world'); }); app.post('/upload',[ multer({ dest: './uploads/'}), function(req, res){ res.status(204).end() }]); app.listen(3000); Multer saves the file...

Backbone this.el is undefined


jquery,backbone.js
I've been following along to the a tutorial i found on youtube. https://www.youtube.com/watch?v=vPW1inIsln4 In the tutorial I don't see him defining el : ... but he's calling this.$el and it appears to be working. In jsfiddle, I have been following along, but get a js error saying Backone this.el is...

React from NPM cannot be used on the client because 'development' is not defined. The bundle was generated from Webpack


javascript,node.js,npm,reactjs,webpack
I'm creating a React Node.js app and I'm trying to generate a Webpack bundle containing the React source code I loaded from NPM. However, it seems that the React code from NPM cannot be used directly in the client. It triggers this error: Uncaught ReferenceError: development is not defined The...

javascript “this” keyword works as expected in browser but not in node.js


javascript,node.js
I know I'm making a mistake here but I can't figure out what it is. The following code (non-strict mode) works as I expect in a browser and outputs "hello" to the console. function a() { console.log(this.bar); } var bar = "hello"; a(); But when I run it in node...

Why is address undefined in my app?


node.js,express,jasmine,supertest
I have a simple express app: var express = require('express'); var path = require('path'); var app = express(); exports.app = app; var index = require('./routes/index'); app.use(express.static(path.join(__dirname,'client/dist/'))); app.get('/', index.get); function start(){ var port = process.env.PORT || 8080; app.listen(port, function(){ console.log('app is running on port: ' + port); }); }; exports.start =...

How to add new items to an array in MongoDB


arrays,node.js,mongodb
I'm trying to add a new item to whichever name that was passed in under whichever id. My first problem is that it seems like its not grabbing the values from any of my variables (name, item, id), instead just using them as object keys. My next issue is that...

Can't call fetch directly in Backbone model listenTo


javascript,backbone.js,coffeescript
I'm trying to have a model listen to a collection and fetch itself when the collection changes: class Team extends Backbone.Model urlRoot: '/team', initialize: function(attributes, options) { this.listenTo(members, 'change', this.fetch) The fetch does seem to trigger, but the url is all messed up, and to get it to work I...

Redis: Delete user token by email ( find Key by Value )


node.js,express,redis
I have followed tutorial on how to create token-based authentication with node from this tutorial http://www.kdelemme.com/2014/08/16/token-based-authentication-with-nodejs-redis/ I got it all worked out, but I got 1 problem. The way I store token is : KEY = TOKEN VALUE = UserData (Username, email, etc.) To protect multiple devices login, I would...

call functions in async with node which is more recomended Q or callback


javascript,node.js,callback,promise,q
I've node app with function that inside call to to other two function,I want to use some async behavior for it,what is recommended to use in this case. example will be very helpful. function myFunction(req,res){ //from here this is the first place which I want to use warp in function...

What are some patterns I can look at for database implementations in JavaScript?


javascript,node.js,mongodb
I'm fairly new to JavaScript, and I'm busy playing around with a node test app and MongoDB. I'm at a point where I'd like to start with the db side of the app, but I'm not sure what patterns are most commonly used in such a stack, and more importantly,...

NodeJS / ExpressJS check valid token parameter before routing


node.js,express,parameters
I have the following app code: (app.js) var express = require('express') , app = express() , port = process.env.PORT || 8082 app.use(require('./controllers')) app.use(function(req, res, next) { res.send('Test') next() }) app.listen(port, function() { console.log('Listening on port ' + port) }) and two controllers: (index.js) var express = require('express') , router =...