Module 2: Views

by emgee

HTML

<script src="http://documentcloud.github.com/underscore/underscore.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone.js"></script>
<div id="test">
    lorem ipsum
</div>

JavaScript

var myModel = new Backbone.Model();
myModel.set("content", "this is some content");

var V = Backbone.View.extend({
    tagName: "li",
    id: "thing",
    className: "active",
    attributes: {
        "data-value": 12345
    }
});

var v = new V({});
$("body").prepend(v.el);

// attach to existing DOM element; using $el
var v2 = new V({el: "#test"});
v2.$el.css("background-color", "CornflowerBlue");

var v3 = new V({model: myModel, className: "model-object", tagName:"div"});
v3.$el.css({"height":"20px", "background-color":"salmon"});
$("body").prepend(v3.el);

// el
var v4 = new V({el: "body"});
console.log(v4.el);
console.log(v4.$el); // shows jQuery wrapper around the DOM element