Exemplos de código-fonte em CoffeeScript para Backbone.JS

Formas de Criar View em CoffeeScript.coffee

define [
	"jquery"
	"underscore"
	"backbone"
], ($, _, Backbone) ->

	class MinhaView1 extends Backbone.View
		el: '.page'
    render: ->
      @

	class MinhaView2 extends Backbone.View
    render: ->
      @

# Usage

# Forma 1:
#   Vantagens:
#     * Sintaxe mais clara
#     * Código mais legível
#     * Forma recomendada para renderizar "bootstraps" de aplicação (views-containers)
#   Desvantagens:
#     * Deixa a view "engessada" para apenas um el (no caso, apenas '.page')
#     * Dificulta reúso de código (caso queira renderizar a view em outro lugar, deve-se mudar a variável `el` no código da view ou dinamicamente
minhaView1 = new MinhaView1
minhaView1.render()

# Forma 2:
#   Vantagens:
#     * Deixa a view mais flexível (a class ou tag que conterá a view passa a ser setada na hora de renderizar a view)
#     * Código mais reusável
#     * Forma recomendada para renderizar subviews (views que representam parte da página)
#   Desvantagens:
#     * Código menos legível
#     * Sintaxe confusa para iniciantes, é necessário entender o funcionamento do $el em Backbone.View
minhaView2 = new MinhaView2
$('.page').html minhaView2.render().$el

VisualizadorView.coffee

define ["jquery", "underscore",	"backbone", "app"
], ($, _, Backbone, App) ->

	TEMPLATE = """
		<img src="<%- urlArquivo %>" alt="<%- nomeArquivo %>">
	"""

	class VisualizadorView extends Backbone.View
		el: 'body'
		title: __ 'views.visualizador', 'Visualizador de mídia - TalkProcess'
		template: _.template TEMPLATE

		initialize: (@options) ->
			@render()

		render: ->
			document.title = @title
			@$el.html @template
				urlArquivo: "http://localhost:8090/images/sprites.png"
				nomeArquivo: "Sprites do TalkProcess"

			@