Ember Save Button
HTML
<script src="http://zphyr.org/test/js/libs/handlebars-1.0.0.js"></script>
<script src="http://zphyr.org/test/js/libs/ember-1.0.0-rc.6.js"></script>
<link rel="stylesheet" href="http://zphyr.org/test/css/bootstrap.css">
<link rel="stylesheet" href="http://zphyr.org/test/css/todc-bootstrap.css">
<link rel="stylesheet" href="http://zphyr.org/test/css/font-awesome.css">
<script type="text/x-handlebars" data-template-name="application">
<div>Loading State: {{isLoading}}</div>
<div>
{{view Ember.LoadingButton valueBinding="isLoading" action="setLoading" class = "btn btn-primary btn-large" saveText="Save"}}
</div>
</script>
CSS
div {
padding: 15px;
}
JavaScript
window.App = Ember.Application.create();
App.ApplicationController = Ember.ObjectController.extend({
isLoading : false,
setLoading : function() {
this.set("isLoading", true);
setTimeout(function() {
this.set("isLoading", false);
}.bind(this), 3500);
}
});
Ember.LoadingButton = Ember.View.extend(Ember.ViewTargetActionSupport, {
tagName : "button",
attributeBindings : [ "class" ],
template: function(){
return Ember.Handlebars.compile();
}.property(),
click : function() {
if(!this.get("value")) this.triggerAction();
}
});