Skip to content

Instantly share code, notes, and snippets.

@VinSpee
Last active December 11, 2015 09:58
Show Gist options
  • Save VinSpee/4583428 to your computer and use it in GitHub Desktop.
Save VinSpee/4583428 to your computer and use it in GitHub Desktop.
Marionette Fail... Any Idea why this marionette app isn't rendering "name"? The collection is loaded.
<td><%= name %></td>
<thead>
<tr class='header'>
<th>Name</th>
</tr>
</thead>
<tbody>
</tbody>
define ["marionette", "views-angry-cats", "models-angry-cat", "collections-angry-cats"], (Marionette, AngryCatsView, AngryCat, AngryCats)->
init: ->
MyApp = new Backbone.Marionette.Application()
MyApp.addRegions
mainRegion: "#content"
MyApp.addInitializer (options) ->
angryCatsView = new AngryCatsView
collection: options.cats
MyApp.mainRegion.show(angryCatsView)
cats = new AngryCats [
new AngryCat name: "Poop"
new AngryCat name: "Pee"
new AngryCat name: "Piss"
new AngryCat name: "Shit"
]
MyApp.start cats:cats
console.log cats.toJSON()
define ["backbone", "models/angry-cat"], (Backbone, AngryCat)->
class AngryCats extends Backbone.Collection
model: AngryCat
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<div id="content">
</div>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
<![endif]-->
<!-- Add your site or application content here -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="scripts/vendor/jquery.min.js"><\/script>')</script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
<!-- build:js scripts/amd-app.js -->
<script data-main="scripts/main" src="scripts/vendor/require.js"></script>
<!-- endbuild -->
</body>
</html>
require.config
shim:
"underscore":
exports: "_"
"backbone":
deps: ["jquery", "underscore"]
exports: "Backbone"
"marionette":
deps: ["backbone"]
exports: "Marionette"
paths:
text: "vendor/text"
jquery: "vendor/jquery"
underscore: "vendor/underscore"
backbone: "vendor/backbone"
marionette: "vendor/backbone.marionette"
require ["jquery", "underscore", "backbone", "marionette", "app"], ($, _, Backbone, Marionette, app) ->
console.log "Test output:"
console.log "$: #{typeof $}"
console.log "_: #{typeof _}"
console.log "Backbone: #{typeof Backbone}"
console.log "Marionette: #{typeof Backbone.Marionette}"
# use app here
do app.init
define ["backbone"], (Backbone)->
class AngryCat extends Backbone.Model
define ["marionette", "text!templates-angry-cat.html"], (Marionette, AngryCatTemplate)->
class AngryCatView extends Backbone.Marionette.ItemView
template: AngryCatTemplate
tagName: "tr"
className: "angry_cat"
AngryCatView
define ["marionette", "views-angry-cat", "text!templates-angry-cats.html"], (Marionette, AngryCatView, AngryCatsTemplate)->
class AngryCatsView extends Backbone.Marionette.CompositeView
template: AngryCatsTemplate
tagName: "table"
id: "angry_cats"
itemView: AngryCatView
appendHtml: (collectionView, itemView) ->
collectionView.$("tbody").append(itemView.el)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment