example/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Ember CouchDB Kit In Action</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/gh-fork-ribbon.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.5.1/ember.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.0.0-beta.7/ember-data.min.js"></script>
<script src="dist/ember-couchdb-kit.js"></script>
<script src="app.js"></script>
</head>
<body style="margin-top:10px;">
<script type="text/x-handlebars" data-template-name="index">
<div class="container-fluid">
<div class="github-fork-ribbon-wrapper right">
<div class="github-fork-ribbon">
<a href="https://github.com/roundscope/ember-couchdb-kit">Fork me on GitHub</a>
</div>
</div>
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<h5 class="navbar-brand">Ember CouchDB Kit In Action</em></h5>
</div>
</div>
</nav>
<div class="jumbotron">
<p>A simple app to demonstrate usage of <strong>Ember.js</strong> adapter for <strong>CouchDB</strong>. To run this demo locally: </p>
<p><small><kbd>$ git clone git@github.com:roundscope/ember-couchdb-kit.git</kbd></small></p>
<p><small><kbd>$ cd ember-couchdb-kit/example</kbd></small></p>
<p><small><kbd>$ npm install && grunt server</kbd></small></p>
</div>
<div class="row">
<div class="col-lg-4">{{outlet 'common'}}</div>
<div class="col-lg-4">{{outlet 'intermediate'}}</div>
<div class="col-lg-4">{{outlet 'advanced'}}</div>
</div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="board">
<div class="panel panel-info">
<div class="panel-heading">
<h4 class="panel-title" style="text-transform:capitalize;">{{name}}</h4>
</div>
<div class="panel-body">
{{partial "createIssue"}}
</div>
{{partial "issueList"}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="_issueList">
<ul class="list-group">
{{#each controller.content}}
{{#view App.IssueView contextBinding=this}}
<li class="list-group-item">
{{#if view.edit}}
<div class="form-group">
{{#view App.FocusedTextArea class="form-control" viewName="TextAreaEdit" valueBinding=view.context.text}}
{{/view}}
</div>
{{#if attachments}}
{{#each attachments}}
{{file_name}}
{{#view App.DeleteAttachmentView contextBinding=this}} × {{/view}}
{{/each}}
{{/if}}
<button type="submit" class="btn btn-xs btn-success"> Ok </button>
{{#view App.AttachmentView contextBinding=this}}
<button {{action 'browseFile' target=view}} class="btn btn-xs btn-default"> Attach </button>
{{/view}}
{{else}}
{{text}}
{{#if attachments}}
<span>, attachments:</span>
{{#each attachments}}
{{linkToAttachment this}}
{{/each}}
{{/if}}
<div class="btn-group pull-right">
<button type="submit" class="btn btn-xs btn-info">Edit</button>
{{#view App.DeleteIssueView contextBinding=this}}
×
{{/view}}
</div>
{{/if}}
</li>
{{/view}}
{{else}}
{{#view App.IssueView draggable=false}}
<li class="list-group-item">
Empty board...
</li>
{{/view}}
{{/each}}
</ul>
</script>
<script type="text/x-handlebars" data-template-name="_createIssue">
{{#view App.NewIssueView}}
{{#if view.create}}
<div class="form-group">
{{#view App.FocusedTextArea viewName="TextArea" class="form-control"}}
{{/view}}
</div>
<button type="submit" class="btn btn-success"> Save </button>
{{#view App.CancelView}}
<button class="btn btn-default"> × </button>
{{/view}}
{{else}}
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span> Add new issue</button>
{{/if}}
{{/view}}
</script>
</body>
</html>