xjamundx / slide-web

Generic Backbone/AMD/Handlebars example

slide-web

Generic Backbone/AMD/Handlebars example.

Setup

This app shows some fake slides, to get started checkout the out and type the following:

npm install
node app.js

Notes

To see the dev version go to this URL: http://localhost:3000/index.html

To see the production version go to this URL: http://localhost:3000/index-prod.html

Important files:

• /public/js/ - amd js
• /public/js/app.js - main app
• /public/js/app.build.js - build settings
• /public/index.html - shows how to setup require.js
• /public/index-prod.html - shows how to use compiled version

Compiling

grunt

slide-web's Issues

A User Should Be Able to Populate A New Deck With Slides [Require.js]

A user needs to be able to create a new deck.

Add a new link to the "Decks" page on the main listings page.

That new link takes you to a page where you can submit a new deck, It can be a pretty simple form or whatever.

When you submit the form it will need to POST to /decks via AJAX.

Once you submit the form (and it works) the user will automatically be redirected to the new deck page.

Switch to Underscore Templates

I'd love to move away from handlebars and instead use underscore templates.

I'd like the templates to be setup to use the same {{ }} syntax as handlebars.

It needs to work with the compiler properly, probably using something like require-jst.

Add support for real-time group slide viewing

---

I'm offering $10.00 on oDesk for someone to do this task: https://www.odesk.com/jobs/~0196b666655ee820ea

---

Using http://socket.io/ a presenter should be able to in real time manipulate slides that other people can see.

A route for this presentations already exists at /prez/:id

A basic model for presentations also exists already and can be found in /model/pres.js.

Use the parameter ?presenter=true should let the app know that this preson has control over the slides.

Use hard-coded presentations for now.

Add support for presentations

Currently you can only look at decks and click through each slide.

A presentation is an instance of a deck that can be viewed by people and manipulated one slide at a time. So you'll start with the first slide and using your keyboard (or prev/next) buttons you should be able to see each of the slides in the deck.

Routes and models for presentations already exist but don't function:

• /prez/:id
• /model/pres.js

Create Grunt Task to Build Production App

The grunt task should execute the r.js command to create the build.

Header Should Be A View

Create a new HeaderView and associated Model, instead of reaching into the DOM directly with jQuery to update the header.

In order to update the header the main app.js file will instantiate a HeaderView and Header model which it will send to the HeaderView, when a change is observed on the router (using router.on), the app will update the Header model with the new title for the page which will automatically update.

The Header HTML should ook something like this:

<header>
    <h1>My Header</h1>
</header>

A User Should Be Able To Create a New Deck

A user needs to be able to create a new deck.

Add a new link to the "Decks" page.

That new link takes you to a page where you can submit a new deck. It can be a pretty simple form or whatever.

When you submit the form it will need to POST to /decks via AJAX.

That will actually update and save the new deck to the model/deck.js file in an asynchronous way. It will use for its ID 1 more than the last ID in the file.

Once you submit the form (and it works) the user will automatically be redirected to the new deck page.

Port The Whole App to Angular.js

This is to see if you can quickly understand how to work in various frameworks. You should port the basic read-only functionality to http://angularjs.org/.