Gunther

Conquer Your Views. Frustration Free.

Download GitHub

Getting Started

Installation

All of Gunther is contained in a single javascript file, which you can obtain from its GitHub repo. Since it's no longer 1999, you can also use a package manager to install (and update) Gunther:

Bower.io

Bower.io is a package manager for the web. Bower is the recommended method of installation. Simply run

1
bower install gunther

to install Gunther to `bower_components/gunther/lib/gunther.min.js'

If you want to install Gunther's dependencies too, use:

1
bower install jquery underscore backbone gunther

NPM

Gunther is also included in NPM.

1
npm install gunther

Will install Gunther to `node_modules/gunther/lib/gunther.min.js'

Next Steps

The following example contains all you need to get started. See below for an explanation of the parts.

We will be using CoffeeScript in the browser here. Typically you'll want to compile the CoffeeScript separately, but for brevity we are doing it in the HTML document here.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!-- dependencies, from CDN's, but you can obviously include these locally -->
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

        <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>

        <!-- your local gunther install -->
        <script src="bower_components/gunther/lib/gunther.js"></script>

        <!-- Optional, but needed to complete this tutorial -->
        <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/coffee-script/1.7.1/coffee-script.min.js"></script>

        <div id="gunther-output"></div>
        <script type="text/coffeescript">
            # Create a view
            class ExampleView extends Gunther.View
              template: ->
                @p "hello world!"

            # Render the view
            view = new ExampleView el: $ '#gunther-output'
            do view.render
        </script>
    </body>
</html>

Inclusion

Gunther is built around jQuery, and Backbone.js. You can replace jQuery with Zepto.js.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!-- dependencies, from CDN's, but you can obviously include these locally -->
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

        <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>

        <!-- your local gunther install -->
        <script src="bower_components/gunther/lib/gunther.js"></script>
    </body>
</html>

Output Container

In your HTML document, include a div with id output.

1
<div id="gunther-output"></div>

The Gunther Template

The template is a simple one, it creates a <p /> with the inspired text "Hello World!". We will be including this inside of a <script /> tag, compiling the CoffeeScript in the browser.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<!-- CoffeeScript for the browser -->
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/coffee-script/1.7.1/coffee-script.min.js"></script>

<div id="gunther-output"></div>
<script type="text/coffeescript">
    # Create a view
    class ExampleView extends Gunther.View
        template: ->
        @p "hello world!"

    # Render the view
    view = new ExampleView el: $ '#gunther-output'
    do view.render
</script>