• Stars
    star
    107
  • Rank 323,587 (Top 7 %)
  • Language
    CoffeeScript
  • License
    MIT License
  • Created over 12 years ago
  • Updated over 10 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Build Awesome CoffeeScript MVC Applications

Monocle

Built to work with the most famous libraries of the web development. If your project is desktop you can use it with jQuery and if on the contrary it is a mobile project it will perfectly mixed with QuoJS or Zepto.

Monocle uses the MVC pattern and work seamlessly with CoffeeScript. All your applications will be pure verbosity and poetry. If you also want to use me in old-school mode with the all powerful of JavaScript.

Current version: 1.0.2

Getting Started

Monocle gives you a simple and powerful structure to make the most of your web applications. An application consists of three work contexts: Model, View and Controller, developers usually call it the MVC pattern. These three contexts are equally important and each has its full integrity giving responsibility to your application.

GitHub

This is opensource, so feel free to fork this project to help us improve Monocle MVC framework. All source code is developed with CoffeeScript.

Licensing

Monocle is licensed under GPLv3 licensed and a Commercial License for OEM uses. See LICENSE for more information.

How to use

Model:

Usually we find others MVC where the model becomes complex and heavy. With monocle wont have that feeling, the model does exactly what you need without becoming complex conventions, simple but powerfull, let's see how to create one:

class Task extends Monocle.Model
	@fields "name", "description", "type", "done"

If you are interested you can create extra attributes to give more value and integrity to our model:

class Task extends Monocle.Model
	@fields "name", "description", "type", "done"

	# Extra attributes
	@mixAttributes: ->
    	"#{name} - #{description}"

	@done: ->
    	@select (task) -> !!task.done

A very interesting feature of the models is data validation rules, for it only have to create a method called "validate" and include your exceptions. Let's see how to create one:

class Task extends Monocle.Model
	# ...
	validate: ->
    	unless @name
        	"name is required"

Your model has many methods to help you better manage the derived instances. Also note that each new instance of a model is stored in the internal repository record (we will learn to use later):

task = new Task()
task.name = "Clean my teeth"
task.type = "Home"
task.save()

# Or you can try:
task = new Task name: "Go to the meeting", type: "Work"
task.save()

# Inline way
Task.create name: "Learn CoffeeScript", type: "Personal"

If you want to know all instances of a given model just use the method "all":

for task in Task.all()
	console.log task.name

To find instances in the internal repository record, you can use several methods that will be very useful. Also say that all instances have an internal attribute as a UID to identify each of them:

task = Task.find(uid)
# If you want search for a particular attribute
task = Task.findBy "name", "Dexter"

# You can select a group of instances based on a rule
undone_tasks = Task.select(task) -> !task.done

You can update any attribute in a very simple way:

task.name = "Go to the evening meeting"
task.save()

# Inline way
task.updateAttributes name: "Go to the evening meeting"

If you want to know the attributes of a particular instance:

task.attributes()

And of course, you can delete an instance:

task.destroy()

View:

A major problem that exists with the views in Web Applications is the choice of a template engine. Monocle puts you it very easy with Mustache one of the most used template engines of the planet. It also facilitated communication between the model and the view. Let's see how to instantiate a new view:

class TaskItem extends Monocle.View

	container: "ul#tasks"

	template_url: "templates/task.mustache"

If you prefer, you can define your mustache template directly in the view:

class TaskItem extends Monocle.View
	template:
    	"""
    	<li>
        	<strong>{{name}}</strong>
        	<small>{{description}}</small>
    	</li>
    	"""

Monocle facilitates you the communication between the model and the view, for example in the following code you see how to capture an event in our view (click on the item li) and show exactly the data of model it contains:

class TaskItem extends Monocle.View
	# ...
	events:
    	"click li": "onClick"

	onClick: (event) ->
    	console.error "Current Item", @model

An interesting feature is the control of a subelement in a view. The following example shows the creation of a strong element of our template and you can use it in the whole context of the view with the shortcut @name:

class TaskItem extends Monocle.View
	
	elements:
    	"strong": "name"

	exampleMethod: -> @name.html "new content"

To render a view we have several methods to use depending on your needs:

view = new TaskItem model: data
# Append to container
view.append task
# Prepend
view.prepend task
# html
view.html task
# Remove current view (and model reference)
view.remove()
# Refresh a template
view.refresh()

Controller:

Instantiate a controller is something different from the model and the view, so we must tell our DOM element that we want to control:

class Tasks extends Monocle.Controller

controller = new Tasks "section#tasks"

In this way, you could have multiple controllers with the same business code but managing different areas of your application:

controller_section = new Tasks "section#tasks"
controller_aside = new Tasks "aside#tasks"

A controller shares much functionality with the view (although you should not confuse), for example you can both capture events as subelements:

class Tasks extends Monocle.Controller
	# ...
	constructor: ->
    	super
    	Task.bind "create", @bindTaskCreate
    	Task.bind "delete", @bindTaskDelete

	bindTaskCreate: (task) ->
    	alert "You've created #{task.name}!"

	bindTaskDelete: (task) ->
    	alert "You've deleted #{task.name}!"

Routing: go anywhere you want

The routing system in Monocle is very clean, and does not detract versatility. For this we only have to extend the controller with the routes you want to manage. It's simple, just have to indicate which routes we'll want to capture and Monocle controller will do the rest:

class Tasks extends Monocle.Controller
	constructor: ->
    	super
    	@routes
        	"/tasks"    : @listTasks
    	Monocle.Route.listen()

	listTasks: -> console.log "List all tasks"


controller = new Tasks "section#tasks"

You can control all the routes who needs your controller and even capture the parameters you want:

class Tasks extends Monocle.Controller
	constructor: ->
    	super
    	@routes
        	"/task/:id" : @viewTask
    	Monocle.Route.listen()

	viewTask: (params) ->
    	console.log "You choose task with id: #{params.id}"

controller = new Tasks "section#tasks"

Everything isn't capturing routes can also assign a new URL path in your application from any context:

id = 1980
@url "task", id #goes to http://*#/task/1980

More Repositories

1

QuoJS

Micro #JavaScript Library for Mobile Devices
CoffeeScript
2,075
star
2

tuktuk

Simple (but powerful) RWD Framework
CSS
536
star
3

hamsa

A dead simple, data-binding & observable model.
CoffeeScript
72
star
4

vanilla-terminal

🍦A simple and lightweight Javascript web browser terminal
JavaScript
41
star
5

hope

Native implementation of CommonJS Promises/A
CoffeeScript
21
star
6

device.js

JavaScript
19
star
7

zen-server

a lean and mean http router for node.js
CoffeeScript
19
star
8

vanilla-blockchain

🍦A distributed database that maintains a continuously growing list of ordered records.
JavaScript
15
star
9

flexo

A dead simple, responsive & flexible boilerplate.
HTML
14
star
10

bower-quojs

Micro JavaScript library that simplifies your mobile projects
14
star
11

STYLmethods

Repository of methods for CSS preprocessors (Stylus, Less, SASS...)
CSS
9
star
12

atoms-documentation

Documentation for Atoms
7
star
13

zen-proxy

NodeJS Proxy/Balancer based on http-proxy
CoffeeScript
6
star
14

react-hamsa-todomvc

TodoMVC made with React and Hamsa.
JavaScript
4
star
15

package-tuktuk

TukTuk Bower Package
CSS
4
star
16

site

Personal site
CSS
4
star
17

monlowdb

The unrecognized son of LowDB and MongoDB
JavaScript
3
star
18

vanillachain

a distributed database that maintains a continuously growing list of ordered records.
JavaScript
3
star
19

coffeescript.book

CoffeeScript Book in Spanish Language
3
star
20

zen-monitor

Audit Application for ZEN modules
CoffeeScript
3
star
21

devcast.co

Discover a daily curated selection of the latest and hottest videos shared by developers, for developers.
CoffeeScript
3
star
22

spa-router

Single Page Application Router
CoffeeScript
2
star
23

bitpaper.co

Invoicer using Bitcoin Native Segwit addresses
JavaScript
2
star
24

react.filmit

A React client for filmit service (http://filmit.watch/)
CoffeeScript
2
star
25

lungo-bootstrap

Lungo Bootstrap with GruntJS, Monocle, Hope & DeviceJS
JavaScript
2
star
26

swiftjs

Swift/JS Transpiler
2
star
27

monocle.todomvc

Todo app with Monocle (based on addyosmani todomvc)
JavaScript
2
star
28

react-isomorphism

Isomorphic React app that displays a live Twitter feed using Babel.js
JavaScript
2
star
29

lessons.io

CoffeeScript
2
star
30

lungo.brownie

Lungo Brownie Build
JavaScript
2
star
31

package-monocle

JavaScript
1
star
32

saitei-torihiki

裁定取引
JavaScript
1
star
33

ledger-node

A new expanded and private finance experience running on the blockchain.
JavaScript
1
star
34

flexo-site-profile

Example of Flexo Site Profile
CSS
1
star
35

cryptos-bar

Cryptos bar
JavaScript
1
star
36

rootco.de

The high perfomance code editor for your team
CoffeeScript
1
star
37

react-twitter-stream

JavaScript
1
star
38

zen

Example of using ZEN-server/request/proxy
CoffeeScript
1
star
39

orca

JavaScript
1
star
40

ranks

JavaScript
1
star
41

kulturklik

Kulturklik Mobile Client with Atoms
CSS
1
star
42

hamsa-es6

A dead simple, data-binding & observable model in EcmaScript 6
JavaScript
1
star