I tried using modulejs but its still going to toolbar.js.coffee before discussions_app.js.coffee so it won't work as the html element still hasn't been printed to the DOM.
This is what I've got:
show.html.haml
- %script#app-template{type: "text/mustache"}
- .fill-container-wrap.discussions
- .well.discussion
- %h1 Discussions title
- %toolbar
- %script#toolbar-template{type: "text/mustache"}
- %nav.navbar.navbar-default.navbar-discussion{role: "navigation"}
- .navbar-header
- %button.navbar-toggle{"data-target" => "#bs-example-navbar-collapse-1", "data-toggle" => "collapse", type: "button"}
- %span.sr-only
- Toggle navigation
- %span.icon-bar
- %span.icon-bar
- %span.icon-bar
- %ul.nav.navbar-nav
- %li.dropdown
- %a.dropdown-toggle{"data-toggle" => "dropdown", href: "#"}
- All Categories
- %b.caret
- %ul.dropdown-menu
- %li
- %a{href: "#"} Action
- %li
- %a{href: "#"} Another Action
- %li
- %a{href: "#"} something
- %li.divider
- %li
- %a{href: "#"} Seperated Link
- #canjs
- :javascript
- console.log('hello 1');
- modulejs.require('canjs/apps/discussions/discussions_app');
- new DiscussionsApp('#canjs');
- modulejs.define "canjs/apps/discussions/discussions_app", ["canjs/apps/discussions/components/toolbar"], (Toolbar) ->
- console.log 'hello 2'
- can.Control.extend 'DiscussionsApp',
- init: ->
- @element.html can.view('app-template', {})
- return
- modulejs.define "canjs/apps/discussions/components/toolbar", ->
- console.log 'hello 3'
- can.Component.extend
- tag: 'toolbar'
- template: can.view('toolbar-template', {})
- scope:
- message: 'this is my toolbar'
and this is the output I'm getting from the console and you'll see that toolbar.js.coffee is showing before discussions_app.js.coffee
hello 1 watford-wayfarers:958
hello 3 toolbar.js?body=1:3
hello 2 discussions_app.js?body=1:3
- Uncaught TypeError: Object #<DocumentFragment> has no method 'replace' can.jquery.js?body=1:3430
I'm not sure what else to do really :S