backbone.epoxy
Version:
Elegant data binding for Backbone.js
153 lines (144 loc) • 5.92 kB
HTML
<html>
<head>
<title>Backbone.Epoxy - Test Suite</title>
<link rel="stylesheet" type="text/css" href="node_modules/mocha/mocha.css">
<style>
body {
margin-bottom: 50px;
}
.test-view {
border: 1px solid #ccc;
display: inline-block;
margin: 15px;
padding: 15px;
width: 200px;
}
.test-view p {
margin: 5px 0;
}
.test-view .section {
border-top: 1px solid #ccc;
margin-top: 15px;
padding-top: 10px;
}
.test-classes {
color: #999;
}
.active {
color: #000;
}
.hilite {
color: #1ec900;
}
.error {
color: #f00;
}
</style>
</head>
<body>
<div id="dom-view" class="test-view">
<strong>DOM / Attribute Mapping</strong>
<div class="section">
<p><label class="test-classes" data-bind="classes:{error:firstNameError,active:active}">First name:</label></p>
<input class="test-input-first" type="text" data-bind="value:firstName,events:['keyup']">
<p><label class="test-classes" data-bind="classes:{error:lastNameError,active:active}">Last name:</label></p>
<input class="test-input-last" type="text" data-bind="value:lastName,events:['keyup']">
<p class="test-css" data-bind="css:{display:errorDisplay}">Error: incomplete form.</p>
</div>
<div class="section">
<span class="test-text-first" data-bind="text:firstName"></span>
<span class="test-text-last" data-bind="text:lastName"></span>
<p class="test-html" data-bind="html:nameDisplay"></p>
</div>
<div class="section">
<p>
<strong>
<a class="test-attr-multi" data-bind="attr:{href:preference,title:preference}">model.active:</a>
</strong>
<span class="test-attr" data-bind="text:active,attr:{'data-active':active}"></span>
</p>
<p>
<label>active:</label>
<input type="checkbox" class="test-checked-boolean" data-bind="checked:active">
<button class="test-enabled" data-bind="enabled:active">yes</button>
<button class="test-disabled" data-bind="disabled:active">no</button>
<p>Y/N : <input type="text" class="test-yes-no" data-bind="sayYesNo:active,events:['keyup']" style="width:15px;"></p>
</p>
</div>
<div class="section">
<p>Selected Options: <span class="test-custom-binding" data-bind="printArray:checkList"></span></p>
<p>
<label>a</label>: <input type="checkbox" class="check-list" value="a" data-bind="checked:checkList">
<label>b</label>: <input type="checkbox" class="check-list" value="b" data-bind="checked:checkList">
<label>c</label>: <input type="checkbox" class="check-list" value="c" data-bind="checked:checkList">
</p>
<p class="test-view-computed" data-bind="text:checkedCount"></p>
</div>
<div class="section">
<p>
<strong>model.preference:</strong>
<span data-bind="text:preference"></span>
</p>
<p>
<label>a:</label>
<input type="radio" class="preference" name="preference" value="a" data-bind="checked:preference">
<label>b:</label>
<input type="radio" class="preference" name="preference" value="b" data-bind="checked:preference">
</p>
</div>
</div>
<div id="mod-view" class="test-view">
<strong>Binding Operators</strong>
<div class="section">
<p class="test-toggle" data-bind="toggle:active">Toggled ON</p>
<p class="test-mod-not" data-bind="toggle:not(active)">Toggled OFF</p>
<p class="test-mod-all" data-bind="classes:{hilite:all(firstName,lastName)}">first AND last name.</p>
<p class="test-mod-none" data-bind="classes:{hilite:none(firstName,lastName)}">NOT first AND last name.</p>
<p class="test-mod-any" data-bind="classes:{hilite:any(firstName,lastName)}">first OR last name.</p>
<p class="test-mod-length" data-bind="classes:{hilite:length(checkList)}">Checklist Length</p>
<p class="test-mod-format" data-bind="text:format('Name: $1 $2',firstName,lastName)"></p>
<p class="test-mod-select" data-bind="text:select(active,firstName,lastName)"></p>
</div>
<div class="section">
<p><select class="test-select" data-bind="value:valOptions,options:optionsList"></select></p>
<p><select class="test-select-collect" data-bind="value:valCollect,options:$collection"></select></p>
<p><select class="test-select-default" data-bind="value:valDefault,options:optionsList,optionsDefault:optDefault"></select></p>
<p><select class="test-select-empty" data-bind="value:valEmpty,options:optionsList,optionsEmpty:optEmpty"></select></p>
<p><select class="test-select-both" data-bind="value:valBoth,options:optionsList,optionsDefault:optDefault,optionsEmpty:optEmpty"></select></p>
<p><select class="test-select-multi" multiple="multiple" data-bind="value:valMulti,options:optionsList"></select></p>
</div>
<div class="section">
<div class="test-template" data-bind="template:['firstName','lastName']">
<script type="text/tmpl"><p>{{ firstName }} {{ lastName }}</p></script>
</div>
</div>
<div class="section">
<strong>Collection Management</strong>
<input class="name-input" type="text" value="">
<button class="name-add">Add</button>
<ul class="test-collection" data-bind="collection:$collection"></ul>
</div>
</div>
<script type="text/template-epoxy" id="tmpl-view-tmpl">
<div id="tmpl-view" class="test-view">
<strong>Template / Selector Mapping</strong>
<p><span class="user-first"></span> <span class="user-last"></span></p>
</div>
</script>
<div id="mocha"></div>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/mocha/mocha.js"></script>
<script src="node_modules/chai/chai.js"></script>
<script src="node_modules/underscore/underscore.js"></script>
<script src="node_modules/backbone/backbone.js"></script>
<script src="backbone.epoxy.js"></script>
<script>
expect = chai.expect;
mocha.setup('bdd');
_.templateSettings = { interpolate : /\{\{(.+?)\}\}/g };
</script>
<script src="test.js"></script>
<script>mocha.run();</script>
</body>
</html>