Should grab loading indicator styles and template from phoenix for this.

<a href="#/internal"Internal</a
<a href="/external" data-external="true"External</a

should be

<a href="#/internal">Internal</a
<a href="/external" data-external="true">External</a

Think of the children, etc.

This may be a non-issue and may have more to do with me being a Thorax newbie, but...

I try "thorax view hello_world myview" and get the following error:

myapp% thorax view hello_world myview
created view: js/views/myview.js
created template: templates/myview.handlebars

node.js:201
        throw e; // process.nextTick error, or 'error' event on first tick
              ^
TypeError: Cannot call method 'push' of undefined
    at [object Object].view (/usr/local/lib/node_modules/thorax/lib/cli.js:358:52)
    at Object.<anonymous> (/usr/local/lib/node_modules/thorax/lib/cli.js:231:20)
    at Object.<anonymous> (/usr/local/lib/node_modules/thorax/lib/cli.js:170:41)
    at Object.<anonymous> (/usr/local/lib/node_modules/thorax/bin/thorax:14:28)
    at Module._compile (module.js:441:26)
    at Object..js (module.js:459:10)
    at Module.load (module.js:348:31)
    at Function._load (module.js:308:12)
    at Array.0 (module.js:479:10)
    at EventEmitter._tickCallback (node.js:192:40)

My initial thought was that it was because the module name has an underbar in it, but I was able to create another module with an underbar in it and add a view with no problems.

C:\Users\jriviere>thorax create project-name
Unrecognized command: create

C:\Users\jriviere>

This is appearing in chrome while its working well in firefox.
Error is in below code (lumbar-loader-standard.js)

if (callback) {
var interval = setInterval(function() {
var i = loaded.length;
while (i--) {
var sheet = loaded[i];
if ((sheet.sheet && ('length' in sheet.sheet.cssRules)) || (sheet.styleSheet && sheet.styleSheet.cssText)) {
loaded.splice(i, 1);
callback();
}
}
if (!loaded.length) {
clearInterval(interval);
}
}, 100);
}

The README has been updated to reflect the change from "bin/server" to "npm start", but the main website (http://walmartlabs.github.com/thorax/) has not. Additionally, the README file still refers to a bin directory under "Project Structure", even though no "bin" directory is created now.

After running: npm install -g lumbar thorax

Here is what I got:

Nothing to clean (project not configured)
Setting srcdir to : /usr/local/lib/node_modules/lumbar/node_modules/jsdom/node_modules/contextify
Setting blddir to : /usr/local/lib/node_modules/lumbar/node_modules/jsdom/node_modules/contextify/build
Checking for program g++ or c++ : not found
/usr/local/lib/node_modules/lumbar/node_modules/jsdom/node_modules/contextify/wscript:11: error: could not configure a cxx compiler!
npm ERR! error installing [email protected]
npm ERR! error installing [email protected]
npm ERR! error installing [email protected]
npm ERR! [email protected] preinstall: node-waf clean || (exit 0); node-waf configure build
npm ERR! sh "-c" "node-waf clean || (exit 0); node-waf configure build" failed with 1
npm ERR!
npm ERR! Failed at the [email protected] preinstall script.
npm ERR! This is most likely a problem with the contextify package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node-waf clean || (exit 0); node-waf configure build
npm ERR! You can get their info via:
npm ERR! npm owner ls contextify
npm ERR! There is likely additional logging output above.
npm ERR!
npm ERR! System Darwin 10.8.0
npm ERR! command "node" "/usr/local/bin/npm" "install" "-g" "lumbar" "thorax"
npm ERR! cwd /Applications/MAMP/htdocs
npm ERR! node -v v0.6.7
npm ERR! npm -v 1.1.0-beta-10
npm ERR! code ELIFECYCLE
npm ERR! message [email protected] preinstall: node-waf clean || (exit 0); node-waf configure build
npm ERR! message sh "-c" "node-waf clean || (exit 0); node-waf configure build" failed with 1
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! /Applications/MAMP/htdocs/npm-debug.log

I now see that I need to intall Xcode first :)
Sorry and maybe, we can give better warnings for mac users?

When using the CLI, the "thorax model" command placed the new model file in a "files" collection. For proper organization, shouldn't it be in the "scripts" collection?

(Slightly related to #35, which appears to have been fixed.)

An error is thrown in the browser after downloading thorax-lumber 2.0.0b4 and running npm start.

Error: View hello-world/index.render() was called with no content and no template set on the view.
http://localhost:8000/base.js
Line 5711

Here is the output from the watch it looks like everything was built successfully.

Express server listening on port 8000
compiled /home/pllee/dev/node/thorax-lumbar/public/base.css
compiled /home/pllee/dev/node/thorax-lumbar/public/hello-world.js
compiled /home/pllee/dev/node/thorax-lumbar/public/base.js
compiled /home/pllee/dev/node/thorax-lumbar/public/hello-world.css
compiled /home/pllee/dev/node/thorax-lumbar/public/img/glyphicons-halflings.png
compiled /home/pllee/dev/node/thorax-lumbar/public/img/glyphicons-halflings-white.png
compiled /home/pllee/dev/node/thorax-lumbar/public/index.html

I am running node 0.8.1 and npm 1.1.62. Also if you cannot reproduce the issue please feel free to close it.

Should be the opposite of registerEvents, support for:

• unregisterEvents()
• unregisterEvents('name')
• unregisterEvents('collection','name')
• unregisterEvents({event_name:handler})

Should be backwards compatible, look at:

http://rickharrison.github.com/validate.js/

See #61 for details

Investigate what changes are needed to the core library and setup a branch of thorax-example (or another repo) with a boilerplate Rails 3 project with Thorax / Backbone / etc installed. Hopefully getting some help from @jasonwebster on this.

dispose has landed in the latest Backbone (as of yet unreleased), but is here to stay.

Current implementation of model.load has issues:

• there is a bug: it calls bindToRoute, which binds something to history's 'route' event and only unbinds it if success callback is called. It doesn't unbind if error callback is called, so it remains bound to 'route' event and will be called when the route changes.
• the parameters that it takes are inadequate: it calls failback in two cases: the route has changed OR the error occurred. We definitely want to distinguish these two cases. Adding one more parameter (errorCallback) should work, but that would be a 4th parameter, which is a bit too much. Maybe just use options parameter with success, error and routeChanged attributes, similar to backbone's fetch method?

UPDATE:
Please disregard the second issue. I just realized first parameter for failback will be true if the error occurred and false otherwise (if the route changed). The first issue is still legit though. It also makes sense to document failback arguments.

var ViewA = Thorax.View.extend({
  events: {
    'event1': 'handler1'
  }
});

var ViewB = ViewB.extend({
  events: {
    'event2': 'handler2'
  }
});

Currently ViewB's events replace ViewA's events, which is not usually desired, so you have to use registerEvents if you want to keep event binding from the base view. If you implemented a view with events hash and later on need to extend that view but keep event bindings you have to refactor the base view to use registerEvents.
Maybe it make sense to automatically merge events hashes, so that ViewB would end up with events hash like this:

{
'event1': 'handler1',
'event2': 'handler2'
}

Known items so far:

1. Remove on syntax of:

   view.on(target, eventName, callback)

   In favor of listenTo

2. Update bindEvents and unbindEvents to use listenTo.

3. Fix router issue: #66

4. Remove request event from Thorax.sync as it is now in base Backbone

5. Investigate usage of view.remove, make sure it is complimentary to destroy. Note that dispose is not in Backbone 0.9.9

6. Remove event map code in Thorax as feature is now supported in base on implementation: obj.on({click: action}), ensure that model and collection hashes still work.

7. view.options, view.el and view.tagName are now all supported as functions, make sure there is nothing in Thorax that would cause breakage.

8. Ensure this change does not cause unexpected behavior: Collection#sort now triggers a sort event, instead of a reset event

When using Backbone.history.back() and non-triggering navigate events, the bindToRoute methods will disable the callback due to the changed fragment. In the case of navigation changes that do not trigger anything we likely want to continue to execute the methods that are wrapped in bindToRoute.

Possible (not completely tested or worked out) fix here: https://gist.github.com/3919679

Thorax.View.setModel will only call onModelChange if the model does not have to be fetched. Because of this, you can't rely on the fact that Thorax.View.render will be called.

Suggestion: call onModelChange in success of the model fetch.

• Should it include children too?
• Should you be able to override it by calling: this.view(view_name, {delegateEventsTo: this}) or similar?

"site": {
  "routes": {
    "": "home",
    "contact" : "contact"
  },
  "files": [
    "js/views/site",
    "js/routers/site.js"
  ],
  "styles": ['styles/custom.styl']
}

The custom style styles/custom.styl is inserted, when loaded, inside the body. This is considered a bad pratice.
A better behavior would be put all the custom stylesheets right after the base.css, after they're lazy loaded.

<head>
  <link rel="stylesheet" type="text/css" href="module:base">
  <!-- Custom styles goes here -->
</head>

:)

I changed this locally to jquery's isDefaultPrevented() but this doesn't feel like the most correct fix. (this is in onTouchEnd function, if(event.defaultPrevented))

data-model-cid is assigned by looping over nodes. When the list of nodes is longer than the list of models, the remaining nodes are have the value undefined.

Using the CLI, the platform command doesn't work. For example "thorax platform myPhone" gives the following:

node.js:201
        throw e; // process.nextTick error, or 'error' event on first tick
          ^
Error: ENOENT, no such file or directory '/Users/habuma/Projects/ThoraxSandbox/ThoraxTodo/app/platform/myPhone.js'
    at Object.openSync (fs.js:230:18)
    at Object.writeFileSync (fs.js:618:15)
    at [object Object].writeFile (/usr/local/lib/node_modules/thorax/lib/cli.js:315:8)
    at [object Object].platform (/usr/local/lib/node_modules/thorax/lib/cli.js:540:14)
    at Object.<anonymous> (/usr/local/lib/node_modules/thorax/lib/cli.js:231:20)
    at Object.<anonymous> (/usr/local/lib/node_modules/thorax/lib/cli.js:170:41)
    at Object.<anonymous> (/usr/local/lib/node_modules/thorax/bin/thorax:14:28)
    at Module._compile (module.js:441:26)
    at Object..js (module.js:459:10)
    at Module.load (module.js:348:31)

It appears that it's trying to create a "myPhone.js" file at "app/platform", but no such directory structure exists. Shouldn't it instead be trying to create "js/bridge-myPhone.js"?

collection: {
  'add': '_resetStatus',
  'remove': '_resetStatus',
  'change': '_resetStatus'
}

it would be nice to have a way to say:

"add, remove, change": "_resetStatus"

or something else to do with an array of keys or what have you.

Hi, I think that I found bug in https://github.com/walmartlabs/thorax/blob/2.0/src/collection.js#L29

It not should be return _fetch.apply(this, arguments); but return _fetch.apply(this, options); or I'm doing something completely wrong :).

I have this snippet in app:

new Application.ViewController({
...
    index: function() {        
        var view = new Application.Views['dashboard/index'];
        view.useCases = new UseCaseCollection();
        this.setView(view);

        view.useCases.fetch({data: {page: 1}});
    },
...
}

Running this snipet causes to "Uncaught TypeError: Cannot read property 'success' of undefined " exception. Besides that everything seems to be ok (template loads, data is fetched and inserted into page).

Also the options var has this success property.

Hi,

I'm currently evaluating a few MV* frameworks to use for a bigger project and so far I really like Thorax so naturally I was messing around with it and trying to create the TodoMVC example step-by-step on my own.
After implementing the router I got the following error:
Uncaught TypeError: Cannot call method 'apply' of undefined (thorax.js:1916)

Using the debugger it turns out that the callback argument in the route() function is undefined.
Digging deeper into the code I think I found the problem which is causing this error.

In Backbone.js (using the latest v0.9.9 in my learning project) the callback argument was omitted from the internal this.route() call (see: jashkenas/backbone@ef8e10f) because this argument is set in the route() function if it's not defined:

route: function(route, name, callback) {
    if (!_.isRegExp(route)) route = this._routeToRegExp(route);
    if (!callback) callback = this[name];
    // [...]

So I just took this line and added it to the beginning of the route() function in thorax.js:

route: function(route, name, callback) {
    if (!callback) callback = this[name];
    //add a route:before event that is fired before the callback is called
    return Backbone.Router.prototype.route.call(this, route, name, function() {
        this.trigger.apply(this, ['route:before', name].concat(Array.prototype.slice.call(arguments)));
        return callback.apply(this, arguments);
});

This did the trick and the router is now working.
Can you verify that this is the solution or am I actually missing something else? :)

Cheers, Chris

One of the remaining handlebars tags in thorax.js is the {{version}} which was inserted during build. It would be nice to be able to run a Thorax app and inspect the version via the console, is there an easy way to re-add this via the lumbar build? The value of the version originated via package.json

Create two flavors of the same tutorial for both the lumbar/node env and rails/asset pipeline env. The tutorial should take the boilerplate application generated by the thorax home page and show the reader how to:

• create an additional module
• create additional routes
• add views, scripts, styles and templates to the module that do not conform to the standard naming conventions
• create a collection view
• load data and display a loading indicator with model/collection.load()

Need to finalize the docs styles designs and implement those.

Nice to haves in the end product: UI grid support so mobile clients can view the docs.

Create a simple web service that will clone the thorax-example repo and run thorax command line utilities on it, then send the project across the wire as a ZIP file.

current backbone (0.5.3) has no function undelegateEvents so we should not refer to it.

The documentation on the features implemented in the loading plugin is quite thin. It's hard for me to write about some of them since the inner workings and definitive descriptions of what some of the options do are a bit beyond me.

Allow plugins such as thorax.loading to specify a set of views, collections, models, templates, scripts and styles to be installed in a thorax project using the thorax.json configuration to determine what files should be copied to where.

Backbone 0.9.9 adds a remove method. I think we should clarify the behavior of freeze and differentiate between remove and destroy. In summary remove should be reversible while destroy should be irreversible. One should be able to:

view.remove(); //calls freeze
// view is now frozen, no events on models or collections will respond
view.thaw();
$('body').append(view.el);
// view will be in identical state prior to call to remove

I ran into a couple of problems while trying out thorax. Here you can find the steps I took and some of the bugfixes I tried:

Create a new project:

npm install -g lumbar thorax
thorax create myProject
cd myProject
lumbar build lumbar.json public
bin/server 8000

After opening the browser and navigating to localhost:8000 The first error is: Cannot GET /
Ok not a big problem, after looking at the public folder I realized that there is no index.html file in it. So I navigated to localhost:8000/web
This resulted in the following error message in the chrome developer console: Uncaught ReferenceError: lumbarLoadPrefix is not defined

I was able to fix this by adding the following line to the index.html file (in the static folder):
<script type="text/javascript">var lumbarLoadPrefix='';</script>

Reload the browser which resulted in the next error:
Uncaught ReferenceError: Invalid left-hand side in assignment in hello-world.js line 1
which is: Application.hello-world = (function() {
It turns out that the minus sign is not the best choice here for the module name ;-) So I renamed everything to use an underscore and rebuild the project. (templates/hello_world, styles/hello_world.styl, views/hello_world, routers/hello_world.js)
I also edited lumbar.json, views/hello_world/index.js and routers/hello_world.js and changed hello-world to hello_world.

The next problem is that thorax is not able to find my view:
Error: view: hello_world/index does not exist.
I checked the name in js/views/hello_world/index.js which is correct:

Application.View.extend({
  name: 'hello_world/index'
});

So I digged into the thorax.js file and it looks like in line 741 the if (child.name) is false, because child.name is an empty string and so the view is not added to the Views array.

I stopped looking there for now. Am I missing something? Looks like the hello-world example isn't working or I forgot something during renaming everything.

Write a blog post detailing the construction of mobile.walmart.com and the creation / thought process behind lumbar & thorax.

Create a plugin that auto adds templates to the lumbar templates hash.

Given a view named "views/account/create.js" it would look for:

• templates/account/create (folder)
• templates/account/create*?.handlebars (files)

Entries are only added to the templates hash if the files exist. These values are merged with the existing array if defined in lumbar.json

Presently the ready event is only fired on views passed to LayoutView.setView. I think two additions in functionality would make sense:

1. It is available on any view including all child views and generated HelperViews.
2. The callback is fired immediately if the view is already ready ala jQuery / Zepto's $.ready.

Some questions to work out:

• How can view's who's root is not a LayoutView support this? My solution is just to manually trigger the ready event on them:

  view.trigger('ready')

Note that in the boilerplate projects we do this on the root LayoutView.

• Can a view go from ready to not ready and then back again? Backbone has added view.remove which I think is how it would go from ready to not ready.

Allow boostrap to be included in thorax boilerplate applications.

should never check for these properties, this.model and this.collection should create no side-effects unless set with their respective setters

Right now we only support webkit. Note that moz fires a "transitionEnd" event not a "mozTransitionEnd" event.

The mobile source file should be broken into multiple files for taphiglight, fast click, etc. as they were originally implemented.

The user interface should provide the following options:

• Env: Rails | Node | Standalone
• Platform setup: Web | Mobile
• $: jQuery | Zepto
• Add module (+), for each module:
  • add route (+)
  • add view (+)
    • add template (+)
  • add model (+)
  • add collection (+)
  • add stylesheet (+)

The output will be a list of command lines the user can run if they have installed lumbar/thorax or a link to a web service that will run these commands, sending the user a ZIP file.

When issuing a "thorax router", it would be nice if the created router JS file would be referenced in the "scripts" collection in lumbar.json. I hadn't noticed that this wasn't added and it took me awhile to figure out why the router wasn't working (or even being loaded)...turns out it was because the router's script wasn't being loaded because it wasn't listed in lumbar.json.

When a view initializes a child view with the same model or collection that is bound to the parent inside of the render or context methods an infinite loop is created when the child causes the parent to re-render, causing the child to render, causing the parent...

In _addEvent on some (but not all) nested views and inside item views in a {{collection}} helper it is necessary to _.defer the this.$el.delegate call, only in jQuery. Need to determine the difference in behavior between Zepto and jQuery. The hack of using _.defer should be adequate for all real world applications for the time being.

How should model and collection events be handled in HelperView instances? Consider the following:

view.on({collection: {eventName: function(){}}});
view.myCollection = myCollection;
view.template = '{{#collection myCollection}}{{/collection}}';
view.render();

In this case a new HelperView will be generated for the collection helper, which will call bindCollection on myCollection, but not on view.

A simple solution that might make sense would be to have all HelperView events on models and collections forwarded up to the declaring view.

Another case that I'm curious about is if a view calls bindCollection on a collection / model and starts loading it, then renders a template with helpers that will also call bindCollection (collection helper mainly).

If we can determine what should be done in these cases I'll write up some test cases and make modifications accordingly.

From the difficulties on walmart mobile with this it would seem that data load handling would best be left as an application level decision.