Category Archives: JavaScript

Opening Nodes in jsTree with Ember.js

Californian Coast Redwoods. Photo by Jeff Balland on Flickr

Who should read this ?

This is going to be of interest if you’re using the ember-cli-jstree addon and you want to programmatically open a node in the tree. It’s niche, but if you want it … here it is.

Overview

If you want a tree widget as part of your interface then the jsTree jquery plugin is a good option. I’ve used it on a number of projects and while it’s not perfect it’s really very good.

Two examples of the output from the the jsTree jquery plugin are shown.
Examples of jsTree usage from the jsTree documentation

If you’re working with Ember.js then an ember addon, ember-cli-jstree, exists to allow you to use the jsTree plugin in a more “emberish” manner.

Opening a node programmatically

So for our current purposes I’m going to assume you’ve

  • got your Ember.js project setup and running
  • you’ve got a template that’s making use of the ember-cli-jstree component
  • the resulting tree is populated with some data and
  • you want to allow some processing to open the tree at a given node without selecting it

Looking at the documentation, here and here , it seems that all that’s needed is to specify the node you want to open but I’ve found that’s not so.

A screen shot of part of the jstree documentation. The argument list to be used when you call the function 'open_node' is shown. The key point being that the first argument is described as "the node to open"
The ‘open_node’ function signature from the jsTree documentation

In fact if you want to open a node other than the topmost node it’s necessary to make a series of calls to open_node starting at the topmost node and ‘walking’ down to the node you wish to open.

An Example

So imagine you have a tree which shows areas of the United States and that you wish to open a node that corresponds to the street in New York City called Broadway.

On first reading it would seem that all that was necessary was to execute the following, but that’s not so.

  this.myActionReceiver.send('openNode', 'Broadway');

In fact to do that it would be necessary to execute the following processing

  this.myActionReceiver.send('openNode', 'NY');
  this.myActionReceiver.send('openNode', 'NewYorkCity');
  this.myActionReceiver.send('openNode', 'Manhattan');
  this.myActionReceiver.send('openNode', 'Broadway');

One last thing

If you find yourself having do this then it’s worth remembering that the parameters passed to a number of events include a action object and within the action object there is an array of parents which in the above example would look like this.

# action.node.parents
["Manhattan", "NewYorkCity", "NY", "#"]

Hope it was helpful.

Backbone and Handlebars : “Backbone is not defined”

It’s ages since I’ve used Backbone but I’ve needed to in the past few days. I also needed to use Handlebars templates with it.

I’ve spent far too long today trying to understand why when I tried to do that I kept getting an error message “Backbone is not defined”.

You see my previous ‘old-style’ use of Backbone was a plain old ‘HTML with script tags’ page which did it’s templates the Underscore way and  which included the relevant scripts something like this :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<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.3.3/backbone-min.js"></script>

So when I wanted to switch from Underscore templates to Handlebar templates I just dropped the reference to Underscore and include a reference to Handlebars like this

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>

And that’s when I got the error message “Backbone is not defined”  … for a painfully long time.

Well long story short it seems that in order to use Handlebars in that way you have to include Underscore as well like this :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js"></script>
<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.3.3/backbone-min.js"></script>

I still have yet to see it written down that you need to do this but it works ! I was put on the right path by this gist https://gist.github.com/kyleondata/3440492 .

Of course if I’d done something contemporary like use browserify in the first place I suspect I wouldn’t have has this problem but if you’re doing it old school then this is what I suggest you do.

Hope it helps.

Datejs – Date.isAfter – no such function ?

date.js – missing methods

Summary

Save yourself a lot of pain and ensure you’re using the right version of  Datejs.

Datejs – It’s great !

Let me start by saying that Datejs, an open-source JavaScript Date Library, is great ! It provides a lot of much needed functionality to the area of dates in Javascript.

Weirdly missing methods

Having said that what I want to highlight is that if you use the standard download links offered by the website (as shown below) you’ll get a version of Datejs which is not the most current one.

What’s more it seems that the version you will get contains a number of defects.

I can vouch for this as I’ve spent a couple of hours today wondering why the ‘.isAfter’ and the ‘.compare’ methods didn’t seem to exist in the form they are documented ! Very frustrating !

What You Should Do

Instead of using the download link on the first page to get the date.js file go here instead : http://www.datejs.com/build/date.js. The version number is the same, “1.0 Alpha-1”, but the build date is “2008-05-13”.

At least at the time of writing – it’s the “2008-05-13” build you want.

Credit Where Credits Due

I’m grateful to Ben McIntyre whose post on the Datejs forums alerted me to this problem, I only wish I’d seen it earlier !

Ace ‘Editor in the Browser’ – Documentation

Ace ‘Editor in the Browser’ – Documentation

The documentation for Ace – where is it ?

Summary

The Ace documentation isn’t that hard to find but you do need to know where to look

Ace in the hole

The Ace project provides a customizable, embeddable code editor for web applications. It’s written solely in JavaScript and is really very impressive.

You can see it in action at their demo page (which frankly is a bit bare bones) or at the Cloud9 project for which Ace is the starting point.

Documentation is where ?

You can download the Ace distribution from https://github.com/ajaxorg/ace – you need the ‘Downloads’ button at the top right.

Once you’ve done that you’ll find there’s nothing worth reading in the docs folder within the distribution.

Instead what you need to do is go visit the Ace wiki at Github. It took me a while to work this out (with the help of the Ace user group forum) so I hope it will save some others the trouble.