Skip to content

Instantly share code, notes, and snippets.

@donnut

donnut/index.html

Created October 29, 2012 16:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save donnut/3974610 to your computer and use it in GitHub Desktop.
Save donnut/3974610 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<title>QUnit Tests</title>
<meta charset='utf-8' />
<link rel="stylesheet" href="./lib/qunit.css" type="text/css" media="screen" />
<script type="text/javascript" src="./lib/json2.js"></script>
<script type="text/javascript" src="./lib/jquery.js"></script>
<script type="text/javascript" src="./lib/jquery.mockjax.js"></script>
<script type="text/javascript" src="./lib/underscore.js"></script>
<script type="text/javascript" src="./lib/backbone.js"></script>
<script type="text/javascript" src="./lib/backbone-associations.js"></script>
<script type="text/javascript" src="./main.js"></script>
<script type="text/javascript" src="./lib/qunit.js"></script>
</head>
<body>
<h1 id="qunit-header">Backbone-associations Test Suite</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">
</div>
<div>
</body>
</html>
Raw
main.js
$(document).ready(function() {
$.mockjax({
url: '/api/app',
dataType: 'json',
responseText: {
"name": "Erwin",
"panel": [{
"name": "Zonnepaneel",
"master": [{
"name": "Schoolmeester",
}]
}]
}
});
var Master = Backbone.AssociatedModel.extend({
defaults: {
name : "",
}
});
var Panel = Backbone.AssociatedModel.extend({
relations: [
{
type: Backbone.Many,
key: 'master',
relatedModel: Master
}
],
defaults: {
name : "",
master: []
}
});
var Webapp = Backbone.AssociatedModel.extend({
url: '/api/app',
relations: [
{
type: Backbone.Many,
key: 'panel',
relatedModel: Panel
}
],
defaults: {
name : "",
panel : []
}
});
var WebappView = Backbone.View.extend({
initialize: function() {
_.bindAll(this, 'render', 'render_panel');
this.model.on('change', this.render, this);
this.model.on('change:panel', this.render_panel, this);
},
render: function() {
console.log('render app');
},
render_panel: function(panel) {
var panelView = new PanelView({ model: panel });
panelView.render();
}
});
var PanelView = Backbone.View.extend({
initialize: function() {
_.bindAll(this, 'render', 'render_master');
this.model.on('change', this.render);
this.model.on('change:master', this.render_master);
},
render: function() {
console.log('render panel');
},
render_master: function(panel) {
var masterView = new MasterView({ model: master });
masterView.render();
}
});
var MasterView = Backbone.View.extend({
initialize: function() {
_.bindAll(this, 'render');
this.model.on('change', this.render);
},
render: function() {
console.log('render master');
}
});
module('initialization');
stop();
asyncTest('fetch from server', function() {
var app = new Webapp();
var appview = new WebappView({model: app});
app.fetch({ success: function(model, resp) {
equal(model.get('panel').at(0).get('name'), 'Zonnepaneel');
start();
}});
});
});
@jdkanani
Copy link 

var WebappView = Backbone.View.extend({
    initialize: function() {
      _.bindAll(this, 'render', 'render_panel');
      //`render` when model changes
      this.model.on('change', this.render);
      //render panel when `panel` resets
      this.model.get("panel").on('reset', this.render_panel);
    },
    render: function() {
        //render WebApp
        console.log('render app');
    },
    render_panel: function(panelCollection) {
        //Iterate over each `panel` and creates `panelView`
        panelCollection.each(function(panel){
            var panelView = new PanelView({ model: panel });
            panelView.render(); 
        });
    }
});
var PanelView = Backbone.View.extend({
    initialize: function() {
        _.bindAll(this, 'render', 'render_master');
        this.model.on('change', this.render);
        this.model.get("master").on('reset', this.render_master);
    },
    render: function() {
        console.log('render panel');
    },
    render_master: function(masterCollection) {
        masterCollection.each(function(master){
            var masterView = new MasterView({ model: master });
            masterView.render();
        });
    }
});
var MasterView = Backbone.View.extend({
    initialize: function() {
        _.bindAll(this, 'render');
        //render `MasterView` again if model changes
        this.model.on('change', this.render);
    },
    render: function() {
      console.log('render master');
    }
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment