Render Handlebars
Enter the HTML/Handlebars in the Text-area provided and click render, accomplished using Ember.ContainerView
by Unspecified
HTML
<script src="https://raw.github.com/wycats/handlebars.js/1.0.rc.2/dist/handlebars.js"></script>
<script src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-pre.4.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<script type="text/x-handlebars" data-template-name="application">
hhh
{{#collection view.editableList}}
hey
{{#if view.editMode}}
{{view Ember.TextField}}
{{else}}
<p>{{view.content.name}}</p>
<div class="btn btn-secondary">Edit</div>
{{/if}}
{{/collection}}
</script>
JavaScript
App = Ember.Application.create();
App.ApplicationController = Ember.ArrayController.extend({
});
App.ApplicationView = Ember.View.extend({
content: [
Ember.Object.create({name: "Tom"}),
Ember.Object.create({name: "Jerry"})
],
editableList: Ember.CollectionView.extend({
itemViewClass: Ember.View.extend({
editMode: false
})
})
});