Ember Demo - Form Validation By Computed Property
HTML
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js"></script>
<script type="text/javascript" src="http://builds.emberjs.com.s3.amazonaws.com/beta/daily/20140311/ember.js"></script>
<script type="text/javascript" src="http://builds.emberjs.com/canary/ember-data.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.5.2/jquery.mockjax.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.0/moment.min.js"></script>
<script type="text/javascript" src="http://rawgithub.com/kenelliott/ember-mockjax/master/jquery.ember-mockjax.js"></script>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/>
<script type="text/x-handlebars">
<div class="container">
<h1>Example Ember Application</h1>
{{#link-to "orders.new" class="btn btn-primary"}}
Order
{{/link-to}}
</div>
{{outlet}}
</script>
<script type='text/x-handlebars' data-template-name="orders/new">
<div class='container'>
<h1>New Order</h1>
<div class="form-group">
<label>Name</label>
{{input type='text' valueBinding="name" class="form-control"}}
</div>
<div class="form-group">
<button class="btn btn-primary" {{action "saveOrder"}}>Continue</button>
</div>
</div>
</script>
CSS
.well {margin-top:10px;}
CoffeeScript
# Initiate Ember App
App = window.App = Em.Application.create()
# Set the application adapter to AMS
App.ApplicationAdapter = DS.ActiveModelAdapter.extend()
# Router
App.Router.map ->
@resource 'orders', ->
@route 'new'
# Models
App.Order = DS.Model.extend
name: DS.attr 'string'
# Routes
App.OrdersNewRoute = Em.Route.extend
model: ->
@store.createRecord('order')
# Controllers
App.OrdersNewController = Em.ObjectController.extend
actions:
saveOrder: ->
@content.save()
# Fixtures
App.Fixtures = []
App.Fixtures.Orders = [
id: 1
name: 'Item 1'
]
$.emberMockJax(
fixtures: App.Fixtures
)