I do not think Backbone is big enough to require a complete book on it. It is only 4 base JS classes. I would suggest you look for books on MVC and design patterns related to it. This is really the base. Maybe some guides on restful web apps and HTML.

The best book is to read the annoted source here: http://documentcloud.github.com/backbone/docs/backbone.html



As Julien said it might be too small to have its own book, but [JavaScript Web Applications][1] by Alex MacCaw might be useful. It has a chapter on Backbone as well as other frameworks and covers a lot of general topics that are likely to be relevant to anyone working with Backbone.

Its available as a beta ebook now.


  [1]: http://oreilly.com/catalog/0636920018421

There is a prerelease eBook called [Backbone JS on Rails](http://workshops.thoughtbot.com/backbone-js-on-rails) by some people who are well-known within the Rails community. I haven&#39;t purchased access to it yet, but the Table of Contents looks good.

Recently released [&quot;Developing Backbone.js Applications: Building Better JavaScript Applications&quot; by Addy Osmani](http://shop.oreilly.com/product/0636920025344.do).

Here&#39;s a screencast that might be helpful, it comes with a pdf that&#39;s a bit like a book.

https://peepcode.com/products/backbone-js

I am new to Python (usually work on C#), started using it over the last couple of days.

Within a class, do you need to prefix any call to that classes data members and methods?  So, if I am calling a method or obtaining a value from that class, from within that class, I need to use `self.method()` or `self.intvalue`, for example?

I just want to check that there isn&#39;t a less verbose way that I have not encountered yet.

Python &#39;self&#39; keyword

Where can I find a valid implementation of [LogLog algorithm][paper]? Have tried to implement it by myself but my draft implementation yields strange results.

[Here][source] it is:

	function LogLog(max_error, max_count)
	{
		function log2(x)
		{
			 return Math.log(x) / Math.LN2;
		}
		 
		var m = 1.30 / max_error;
		var k = Math.ceil(log2(m * m));
		m = Math.pow(2, k);
		 
		var k_comp = 32 - k;
		 
		var l = log2(log2(max_count / m));
		if (isNaN(l)) l = 1; else l = Math.ceil(l);
		var l_mask = ((1 &lt;&lt; l) - 1) &gt;&gt;&gt; 0;
		 
		var M = [];
		for (var i = 0; i &lt; m; ++i) M[i] = 0;
	 
		function count(hash)
		{
			  if (hash !== undefined)
			  {
					var j = hash &gt;&gt;&gt; k_comp;
					
					var rank = 0;
					for (var i = 0; i &lt; k_comp; ++i)
					{
						 if ((hash &gt;&gt;&gt; i) &amp; 1)
						 {
							  rank = i + 1;
							  break;
						 }
					}
					
					M[j] = Math.max(M[j], rank &amp; l_mask);
			  }
			  else
			  {
					var c = 0;
					for (var i = 0; i &lt; m; ++i) c += M[i];
					return 0.79402 * m * Math.pow(2, c / m);
			  }
		}
		
		return {count: count};
	}

	function fnv1a(text)
	{
		 var hash = 2166136261;
		 for (var i = 0; i &lt; text.length; ++i)
		 {
			  hash ^= text.charCodeAt(i);
			  hash += (hash &lt;&lt; 1) + (hash &lt;&lt; 4) + (hash &lt;&lt; 7) +
				(hash &lt;&lt; 8) + (hash &lt;&lt; 24);
		 }
		return hash &gt;&gt;&gt; 0;
	}

	var words = [&#39;aardvark&#39;, &#39;abyssinian&#39;, ... ,&#39;zoology&#39;]; // about 2 300 words

	var log_log = LogLog(0.01, 100000);
	for (var i = 0; i &lt; words.length; ++i) log_log.count(fnv1a(words[i]));
	alert(log_log.count());

For unknown reason implementation is very sensitive to `max_error` parameter, it is the main factor that determines the magnitude of the result. I&#39;m sure, there is some stupid mistake :)

**UPDATE:** This problem is solved in the [newer version][hyper] of algorithm. I will post its implementation later.

[paper]: http://algo.inria.fr/flajolet/Publications/DuFl03.pdf
[source]: http://jsfiddle.net/LCDLL/1/
[hyper]: http://algo.inria.fr/flajolet/Publications/FlFuGaMe07.pdf

LogLog and HyperLogLog algorithms for counting of large cardinalities

I&#39;ve been very excited with backbone.js recently, but all I can find was minimal tutorials on the web. Have been searching for a backbone.js book, but since it just recently came out, wasn&#39;t able to find any. Was hoping you guys know currently in production, perhaps a beta available somewhere?

Any backbone.js books available?

<p>I've been very excited with backbone.js recently, but all I can find was minimal tutorials on the web. Have been searching for a backbone.js book, but since it just recently came out, wasn't able to find any. Was hoping you guys know currently in production, perhaps a beta available somewhere?</p>


I&#39;m experimenting a bit with the new canvas element in HTML.

I simply want to add an image to the canvas but it doesn&#39;t work for some reason.

I have the following code:

**HTML**

    &lt;canvas id=&quot;viewport&quot;&gt;&lt;/canvas&gt;

**CSS**

    canvas#viewport { border: 1px solid white; width: 900px; }

**JS**

    var canvas = document.getElementById(&#39;viewport&#39;),
    context = canvas.getContext(&#39;2d&#39;);
    
    make_base();
    
    function make_base()
    {
      base_image = new Image();
      base_image.src = &#39;img/base.png&#39;;
      context.drawImage(base_image, 100, 100);
    }

The image exists and I get no JavaScript errors. The image just doesn&#39;t display.

It must be something really simple I&#39;ve missed...

How to add image to canvas

So I&#39;m trying to make a very basic node.js server that with take in a request for a string, randomly select one from an array and return the selected string.  Unfortunately I&#39;m running into a few problems.

Here&#39;s the front end:

    function newGame()
    {
       guessCnt=0;
       guess=&quot;&quot;;
       server();
       displayHash();
       displayGuessStr();
       displayGuessCnt();
    }
     
    function server()
    {
       xmlhttp = new XMLHttpRequest();
	
       xmlhttp.open(&quot;GET&quot;,&quot;server.js&quot;, true);
       xmlhttp.send();
	
       string=xmlhttp.responseText;
    }

This should send the request to server.js:

    var http = require(&#39;http&#39;);

    var choices=[&quot;hello world&quot;, &quot;goodbye world&quot;];

    console.log(&quot;server initialized&quot;);

    http.createServer(function(request, response)
    {
        console.log(&quot;request recieved&quot;);
        var string = choices[Math.floor(Math.random()*choices.length)];
        console.log(&quot;string &#39;&quot; + string + &quot;&#39; chosen&quot;);
        response.on(string);
        console.log(&quot;string sent&quot;);
    }).listen(8001);

So clearly there are several things going wrong here:

   1. I get the feeling the way I am &quot;connecting&quot; these two files isn&#39;t correct both in the `xmlhttp.open` method and in using `response.on` to send the string back to the front end.

   2. I&#39;m a little confused with how I call this page on localhost.  The front end is named index.html and the sever posts to 8001.  What address should I be go to on localhost in order to access the initial html page after I have initialized server.js? Should I change it to `.listen(index.html)` or something like that?

   3. are there other obvious problems with how I am implementing this (using `.responsetext` etc.)

(sorry for the long multi-question post but the various tutorials and the node.js source all assume that the user already has an understanding of these things.)


Basic Ajax send/receive with node.js

I am trying to use insertBefore in js like this:

    var p = document.createElement(&quot;p&quot;);
    p.innerHTML = &quot;test1&quot;;
    document.body.insertBefore(p, null);
    
    var p = document.createElement(&quot;p&quot;);
    p.innerHTML = &quot;test2&quot;;
    document.body.insertBefore(p, null);

But that would add the last p element just before the close of the body tag, how could I use it so it will be added to the top when it opens? So the last element added will be the first element inside the body tag.

I tried:

    document.body.insertBefore(p, document.getElementsByTagName(&#39;body&#39;)[0]);

But firebug shows:

**Node was not found&quot; code: &quot;8**

How to insertBefore() element in body tag?

Currently, if the person presses &lt;kbd&gt;enter&lt;/kbd&gt; inside the text area, the form will submit.  
Good, I want that.

But when they type &lt;kbd&gt;shift&lt;/kbd&gt; + &lt;kbd&gt;enter&lt;/kbd&gt;, I want the textarea to move to the next line: `\n` 

How can I do that in `JQuery` or plain JavaScript as simple as possible?

How do I detect &quot;shift+enter&quot; and generate a new line in Textarea?

I don&#39;t find anything about my question here on MDC or the ECMAscript specifications. Probably somebody knows a more &#39;hacky&#39; way to solve this.

I&#39;m calling `&quot;use strict&quot;` on every javascript file in my environment. All my files start like this

    (function(win, doc, undef) {
        &quot;use strict&quot;;

        // code &amp; functions
    }(window, window.document));

Now, I have a custom function which handles errors. That functions uses the `.caller` property to provide a *context stack trace*. Looks like this:

    var chain = (function() {
        var _parent = _error,
            _ret = &#39;&#39;;
								
        while( _parent.caller ) {
            _ret += &#39; -&gt; &#39; + _parent.caller.name;
            _parent = _parent.caller;
        }

        return _ret;
    }());

But of course, in strict mode `.caller` is a non-deletable prop which throws when retrieved. So my question is, is anybody aware of way to *disable* strict more &quot;function-wise&quot; ?

`&quot;use strict&quot;;` is inherited by all functions after it was called. Now we have the possibilty to just use strict mode in specific functions by just calling `&quot;use strict&quot;;` at the top of those, but is there a way to achieve the opposite ?



Can I disable ECMAscript strict mode for specific functions?

I&#39;m just starting to get into backbone.js. It looks like it&#39;s pretty involved and won&#39;t be something you can just look at one example and say, &quot;Well, that&#39;s easy!&quot; and start being productive with it. It does look good though.

The documentation is okay, but I find myself not understanding the &#39;big picture&#39; very well, and how all of these components work together. The way events are bound and rendered in the various views actually seems like a lot of entanglements. I understand the need for separation of concerns, but I am actually wondering if it&#39;s just a tad over-engineered.

Essentially... I won&#39;t be able to be immediately productive with backbone.js. There is going to be a a day or two learning curve I think.

What is the best way to get into backbone.js? Just keep chugging along, or are there some larger sample applications to download somewhere to look at?

Are there better alternatives that might be easier to learn and offer the same sort of benefits? For me, productivity and intuitiveness are pretty important. I sort of feel like the way backbone.js works is a little foreign. That could just be me.

Put another way, would it maybe be better to develop my application without a library like backbone and sort of organically create a framework like backbone.js but more like something that is intuitive to me and something more inline with the resultant code base?

I&#39;ve been trying to get simple examples to work with my own code, and I get no Javascript errors... but it doesn&#39;t work. There&#39;s a good chance that &quot;one minor thing&quot; is wrong... but I&#39;m beginning to feel that debugging my backbone applications might be a problem... so perhaps organically growing my own might actually be a better option for my own sanity. Debugging in the dark is a real productivity killer... and honestly, I&#39;d rather do my own framework and write my own code if it spares me hours of endless debugging.

I don&#39;t know what to do - hence why I am asking.

What is the best way to learn backbone.js? Any other alternatives?

I&#39;m evaluating the [Backbone javascript framework][1] for use in a project that will display a hierarchical model in a tree view widget (think the Windows file browser).

I *love* how Backbone thinks about the world.  However, there&#39;s a lot of coding involved before I get to a proof of concept that has Backbone actually receiving a hierarchical model from a server and updating a tree widget.  I&#39;ve seen there&#39;s various solutions for [representing deep data structures with Backbone][2], but I&#39;m wondering... has anyone actually done this? 

Just knowing that it&#39;s possible would be a help.  Actually naming the tree view UI component and pointers for making data hierarchical in Backbone would be even better.  A bit of sample code would be amazingly fantastic.

As far as data size, tree will run 100&#39;s of nodes (folders) with low 1000&#39;s of leaf items (documents), and it would be nice to progressively load the data (say, one folder at a time as the user clicks in), though that&#39;s probably not a showstopper.

Thanks!


  [1]: http://documentcloud.github.com/backbone/
  [2]: https://stackoverflow.com/questions/5864057/any-recommendations-for-deep-data-structures-with-backbone

Backbone with a tree view widget

I am designing a one page browser based web application. 

`JQuery` is already being used in my application. I am currently planning to use `KnockoutJS` for data-binding and UI management. However I have used `Backbone.js` in past, and I have been quite impressed with the routing facilities provided by the controller layer. 

I have also looked into some JQuery-based solution like [pathjs](https://github.com/mtrpcic/pathjs) for client side routing.

It would be great if someone could offer suggestions and guidelines for choosing a proper routing system.
 
I am not willing to use `Backbone.js` instead of `KnockoutJS` because of the excellent data-binding facilities of `KnockoutJS`.


Preferred client side routing solution?

I have a simple question about Backbone.js&#39; **get** and **set** functions.

   1) With the code below, how can I &#39;get&#39; or &#39;set&#39; obj1.myAttribute1 directly?

Another question:

   2) In the Model, aside from the **defaults** object, where can/should I declare my model&#39;s other attributes, such that they can be accessed via Backbone&#39;s get and set methods?

&lt;!-- language: lang-js --&gt;
    
	var MyModel = Backbone.Model.extend({
		defaults: {
			obj1 : {
				&quot;myAttribute1&quot; : false,
				&quot;myAttribute2&quot; : true,
			}
		}
	})

	var MyView = Backbone.View.extend({
		myFunc: function(){
			console.log(this.model.get(&quot;obj1&quot;));
			//returns the obj1 object
			//but how do I get obj1.myAttribute1 directly so that it returns false?
		}
	});

I know I can do:

&lt;!-- language: lang-js --&gt;

    this.model.get(&quot;obj1&quot;).myAttribute1;

but is that good practice? 


Backbone.js get and set nested object attribute

Using backbone.js:

I have a top level ModelA that contains 2 attributes and 2 nested models, ModelB and ModelC. ModelB and ModelC each have 2 attributes as follows:

    ModelA
        attributeA1
        attributeA2
        ModelB
            attributeB1
            attributeB2
        ModelC
            attributeC1
            attributeC2

There is a ViewA for ModelA, and a ViewB for ModelB.
ViewA&#39;s render function places a new div onto the body, whereas ViewB&#39;s render creates an h1.  ViewA&#39;s initialization calls ViewB&#39;s render to insert that h1 into the new div. The rationale behind this separation is that the h1 may change and require re-rendering independent from ViewA.

    ViewA
        initialise: 
            //call ViewA&#39;s own render function
            this.render() 
            
            //call ViewB&#39;s render function that further modifies the $(&quot;#new&quot;) div created earlier.
            $(&quot;#new&quot;).append(ViewB.render().el)
        
        //ViewA&#39;s own render function
        render: //place &lt;div id=&quot;new&quot;&gt;&lt;/div&gt; onto &#39;body&#39;

    ViewB
        render: //create a &lt;h1&gt;&lt;/h1&gt;
        funcB1: //can this access it&#39;s parent ModelA&#39;s attributes and other objects?


Q1: ViewB has a function funcB1. Can this function access it&#39;s parent model&#39;s attributes? Attributes such as attributeA1, or even attributeC1 (which would be a sibling/cousin)?

Q2: As a further expansion to Q1, can funcB1 access the DOM elements associated with ViewA? (in this example, the #new div?)

Q3: In general, how do I define the associations between the Views and Models as described above so that everything ties together properly?

I realize this question is somewhat abstract but any appreciate any help or guidelines appreciated.

Content Type	Original Author	Original Content on Stackoverflow
Question	sent-hil	View Question on Stackoverflow
Solution 1 - Javascript	Julien	View Answer on Stackoverflow
Solution 2 - Javascript	Steve	View Answer on Stackoverflow
Solution 3 - Javascript	Benjamin Atkin	View Answer on Stackoverflow
Solution 4 - Javascript	Sheitan	View Answer on Stackoverflow

Any backbone.js books available?

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

Solution 2 - Javascript

Solution 3 - Javascript

Solution 4 - Javascript

LogLog and HyperLogLog algorithms for counting of large cardinalities

Python 'self' keyword

Attributions