FramerJS MVC architecture example. From: https://www.facebook.com/groups/framerjs/permalink/558844954242580/

app.coffee

# Define the model.  All views will listen to this and update themselves, and will only have to deal with this model, instead of dealing with other views
# Extend BaseClass so we can use the on/emit bindings
class Model extends Framer.BaseClass
	# Define properties that we want to observe like this so we can call `.index =` instead of .setIndex, though that works too
	@define "index",
		get: ()-> @_index || 0
		set: (i) ->
			@_index = i
			# Emit the change so other things can listen to it (probably the views)
			@emit "change:index"

# Define the view classes to keep their code organized
class IncrementButton extends Layer
	constructor: (args) ->
		super args
		@model = args.model
		@width = 200
		@height = 30
		@on Events.Click, @clicked
		@html = "Click To Add"
	
	# When you click the button, tell the model to do something, instead of having to keep track of all the other views, to tell them to update.
	clicked: () =>
		@model.index = @model.index + 1
		
class ValueViewer extends Layer
	constructor: (args) ->
		super args
		@model = args.model
		@width =  200
		@height = 30
		# When the model changes, we update ourselves.
		@model.on "change:index", @indexChanged
		@indexChanged()
		
	indexChanged: () =>
		@html = "Value: #{@model.index}"


# Create the model
model = new Model

# Create the views
values = new ValueViewer model: model
button = new IncrementButton model: model

# Position the views
button.center()
values.center()
values.y -= 50