Skip to content

ollar/generator-marionette

This branch is up to date with mrichard/generator-marionette:master.

Folders and files

NameName
Last commit message
Last commit date
Oct 27, 2013
Jul 26, 2013
Jul 26, 2013
Jul 28, 2013
Jul 28, 2013
Jul 21, 2013
Jul 28, 2013
Jul 28, 2013
Jul 26, 2013
Jul 28, 2013
Jul 28, 2013
Jan 6, 2014
May 21, 2013
Jul 21, 2013
Jul 28, 2013
May 21, 2013
Dec 22, 2016
Apr 7, 2014

Repository files navigation

generator-marionette

Yeoman generator for Express, Marionette and Backbone with AMD

Stack

Directory structure

  • app/ --> client side files

    • /bower_components --> bower installs

    • /images

    • /scripts

      • /vendor --> 3rd party scripts
      • /models
      • /collections
      • /controllers
      • /routers
      • /regions
      • /views
        • /item
        • /collection
        • /composite
        • /layout
      • init.js --> require configuration
      • main.js --> application starting point
      • application.js --> application file
    • /styles --> scss files

    • /templates --> handlebar templates

  • server/ --> node server files

  • test/ --> unittesting

    • /spec --> individual spec files

Install

First make sure you have MongoDB, Node, Npm, Yeoman, Bower and Grunt installed.

Install mongoDB with:

$ brew install mongodb 

Or visit http://www.mongodb.org/

Visit nodejs.org to install node and NPM

Install phantomJS with:

$ brew install phantomjs

Or visit http://phantomjs.org/

To install Yeoman, Bower and Grunt run:

$ npm install -g yo grunt-cli bower

Install mocha-phantomjs:

$ npm install -g mocha-phantomjs

Install mocha generator:

$ npm install (-g) generator-mocha-amd

Install marionette generator

$ npm install (-g) generator-marionette

Bootstrap project

To bootstrap a new project simply run:

$ yo marionette

You have option to include the full express server OR just the marionette generators with a minimal server to develop and run test. No SASS/CSS in the latter.

To start the app run:

$ grunt

Unit testing generation

The biggest change in this release is the automatic unit test generation as part of the marionette-generator. The Marionette generator calls upon the mocha-amd generator. The default grunt task will automatically run all unit test files via phantom JS. You can also use the browser at localhost:1234/test. Test file generation looks something like the following:

  • yo marionette:collection sizes --model size --create-all // run collection generator
  • create app/scripts/collections/sizes.js
  • invoke marionette:model
  • create app/scripts/models/size.js
  • invoke mocha-amd:unitTest
  • create test/spec/models/size.js // unit test for size model
  • force test/spec/testSuite.js
  • invoke mocha-amd:unitTest
  • create test/spec/collections/sizes.js // unit test for sizes collection
  • force test/spec/testSuite.js // testSuite file which lists all test to run

Recommends

The generator is most useful using the --create-all flag. In the example:

$ yo marionette:compositeview peopleview --itemview personview --create-all

You will get the following files:

  • create app/scripts/views/composite/people.js
  • invoke marionette:itemview
  • create app/scripts/views/item/person.js
  • invoke marionette:tmpl
  • create app/templates/item/person_tmpl.hbs
  • invoke marionette:tmpl
  • create app/templates/composite/people_tmpl.hbs

Create routers

You can generate routers too with

$ yo marionette:router router-name

Create model

To add a Backbone model to the project use the model generator like this

$ yo marionette:model model-name

Or to inherit from an existing model

$ yo marionette:model model-name --inherit model-name

Create collection

To add a Backbone collection to the project use collection generator

$ yo marionette:collection collection-name

You can link the collection with an existent model

$ yo marionette:collection collection-name model-name

Or may be you want to create both, model and collection on one step

$ yo marionette:collection collection-name --model model-name --create-all

Or you may want to inherit from another collection

$ yo marionette:collection collection-name --model model-name --inherit collection-name --create-all

Create views

Backbone works with view definitions, to create one use this command. It is recommended to use Marionette views instead of the standard Backbone view

$ yo marionette:view view-name

Create item views

Create a Marionette ItemView and link to an existing template at location templates/[template-location]

$ yo marionette:itemview view-name 

You may want to inherit from another itemview

$ yo marionette:itemview view-name --inherit view-name

Or maybe you want to create both, itemView and template on one step

$ yo marionette:itemview view-name --create-all

Create collection views

Create a Marionette CollectionView that is associated to an existing itemview

$ yo marionette:collectionview view-name --itemview itemview-name

Or inherit from another collectionview

$ yo marionette:collectionview view-name --itemview itemview-name --inherit view-name

Or maybe you want to create both, itemview (with template) and collectionview.

$ yo  marionette:collectionview view-name --itemview itemview-name --create-all

Create composite views

Create a Marionette CompositeView

$ yo marionette:compositeview view-name --itemview itemview-name

Or inherit from another CompositeView

$ yo marionette:compositeview view-name --itemview itemview-name --inherit view-name

Or maybe you want to create all, itemview and compositeview and both templates.

$ yo marionette:compositeview view-name --itemview itemview-name --create-all

Create regions

Create a Marionette Region

$ yo marionette:region region-name

Or inherit from another Region

$ yo marionette:region region-name --inherit region-name

Create layouts

Create a Marionette Layout and link to an existing template at location templates/[template-location]

$ yo marionette:layout layout-name

Or inherit from another layout

$ yo marionette:layout layout-name --inherit layout-name

Or maybe you want to create both, Layout and template on one step

$ yo marionette:layout layout-name --create-all

Create controller

Create a Marionette Controller

$ yo marionette:controller controller-name

Or inherit from another Controller

$ yo marionette:controller controller-name --inherit controller-name

Create templates

Create a handle bars tmpl

$ yo marionette:tmpl tmpl-name --tmplLocation tmpl-location

About

Yeoman marionette generator a la AMD

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 87.8%
  • HTML 12.2%