Hi,
I am trying to write a tutorial on using the following tech stack:
- mongo, meteor, coffeescript, blaze, jade, bootstrap
As a simpler example than the now pretty complex todos, I chose the leaderboard example.
I got an two file version running well with a leaderboard.coffee file and a leaderboard.jade file.
I then tried to refactor it into multiple files following the same app structure than the meteor blaze tutorial. In this modular, refactored version, the template files do not generate any HTML and Google Chrome dev tool gives me the following error:
Uncaught Error: No such template: leaderboard
at http://localhost:3000/packages/blaze.js?hash=891d5a10d82b5122032ced96aa7f478b9b1eeda3:3155:15
at Blaze.View.<anonymous> (http://localhost:3000/packages/spacebars.js?hash=dcb91068ed863bb067d30163ef7df2825655ee2f:68:23)
at http://localhost:3000/packages/blaze.js?hash=891d5a10d82b5122032ced96aa7f478b9b1eeda3:1875:20
at Function.Template._withTemplateInstanceFunc (http://localhost:3000/packages/blaze.js?hash=891d5a10d82b5122032ced96aa7f478b9b1eeda3:3687:12)
at http://localhost:3000/packages/blaze.js?hash=891d5a10d82b5122032ced96aa7f478b9b1eeda3:1873:29
at Object.Blaze._withCurrentView (http://localhost:3000/packages/blaze.js?hash=891d5a10d82b5122032ced96aa7f478b9b1eeda3:2214:12)
at viewAutorun (http://localhost:3000/packages/blaze.js?hash=891d5a10d82b5122032ced96aa7f478b9b1eeda3:1872:18)
at Tracker.Computation._compute (http://localhost:3000/packages/tracker.js?hash=e52e5febdef644d89e21db20456ef53daa80b912:339:36)
at new Tracker.Computation (http://localhost:3000/packages/tracker.js?hash=e52e5febdef644d89e21db20456ef53daa80b912:229:10)
at Object.Tracker.autorun (http://localhost:3000/packages/tracker.js?hash=e52e5febdef644d89e21db20456ef53daa80b912:604:11)
Since the exact same template code and coffee helper and event code worked fined when it was all concatenated in two root files leaderboard.jade and leaderboard.coffee, I pretty sure the problem is either:
- my using import/export incorrectly though trying to match as closely as possible the meteor blaze tutorial
- the jade package not working well with import/export declarations.
Has anyone tried to the two together and encountered a similar problem?
In this refactored version I have:
- a file
client/main.tpl.jadecontaining
head
title Leaderboard
- a file
client/main.coffeecontaining
import '../imports/ui/body.coffee'
- a file
imports/ui/body.tpl.jadecontaining
body
+leaderboard
- a file
imports/ui/body.coffeecontaining
import { Template } from 'meteor/templating'
import './body.tpl.jade'
- a file
imports/ui/leaderboard/leaderboard.tpl.jadecontaining
template(name="leaderboard")
.table-responsive
table.table.table-bordered.table-hover.table-condensed
thead
tr
th(colspan="4")
h2
strong Leaderboard
tr#sortButtonRaw
th#sortButtonCell
p Rank
th
p Player
th(colspan="2")
p Score
tbody
+each players
+player
- a file
imports/ui/leaderboard/leaderboard.coffeecontaining:
import { Template } from 'meteor/templating'
import { aflLeaders } from '../../api/models.coffee'
import './leaderboard.tpl.jade'
Template.leaderboard.helpers
players: -> aflLeaders.find {}, {sort: {score: -1, name: 1}}
- a file
imports/ui/player/player.tpl.jadecontaining
template(name="player")
tr
td
p= rank
td
p= name
td
p= score
td
button.btn-default vote
- a file
imports/ui/player/player.coffeecontaining
import { Template } from 'meteor/templating'
import { Player, Leaderboard, aflLeaders } from '../../api/models.coffee'
import './player.tpl.jade'
Template.player.events
'click tr>td>button': ->
@score = @score + 1
aflLeaders.update {_id: @_id}, @
aflLeaders.rank()
Since the server side is producing the correct initial leaderboard collection, I do not show here the content of the server and isopmorphic files:
-
server/main.coffee -
imports/api/startup/startup.coffee -
imports/api/models.coffee
I use the following packages:
meteor-base@1.0.4 # Packages every Meteor app needs to have
mobile-experience@1.0.4 # Packages for a great mobile UX
mongo@1.1.14 # The database Meteor supports right now
blaze-html-templates@1.0.4 # Compile .html files into Meteor Blaze views
reactive-var@1.0.11 # Reactive variable for tracker
jquery@1.11.10 # Helpful client-side library
tracker@1.1.1 # Meteor's client-side reactive programming library
standard-minifier-css@1.3.2 # CSS minifier run for production mode
standard-minifier-js@1.2.1 # JS minifier run for production mode
es5-shim@4.6.15 # ECMAScript 5 compatibility for older browsers.
ecmascript@0.5.9 # Enable ECMAScript2015+ syntax in app code
shell-server@0.2.1 # Server-side component of the `meteor shell` command
autopublish@1.0.7 # Publish all data to the clients (for prototyping)
insecure@1.0.7 # Allow all DB writes from clients (for prototyping)
coffeescript@1.11.1_3
mquandalle:jade@0.4.9
# dalgard:jade@0.5.4_1
stylus@2.513.7
twbs:bootstrap@3.3.6
Substituting the mquandalle:jade package with the dalgard.jade package advocated in the meteor guide has no effect on the probkem.
Thanks!
