Created
August 27, 2019 13:48
-
-
Save valerysntx/a8d2b6e0cc82f3935f44fa08f6078741 to your computer and use it in GitHub Desktop.
Ember Starter Kit [deprecated enber 1.12.2 bind-action example] // source https://jsbin.com/teciyag
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta name="description" content="[deprecated enber 1.12.2 bind-action example]"> | |
<meta charset="utf-8"> | |
<title>Ember Starter Kit</title> | |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css"> | |
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.12.2/ember.debug.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.12.2/ember-template-compiler.js"></script> | |
<style id="jsbin-css"> | |
/* Put your CSS here */ | |
html, body { | |
margin: 20px; | |
} | |
</style> | |
</head> | |
<body> | |
<div id='app'></div> | |
<pre id="logs"></pre> | |
<script type="text/x-handlebars"> | |
<h2>bind-action 'some-name' example</h2> | |
{{#my-foo as |stuff|}} | |
{{inner-foo trigger-thing=stuff}} | |
{{/my-foo}} | |
</script> | |
<script type="text/x-handlebars" data-template-name="components/my-foo"> | |
{{yield (bind-action 'some-name')}} | |
</script> | |
<script type="text/x-handlebars" data-template-name="components/inner-foo"> | |
<h1> | |
<button {{action "i-was-clicked"}}>Other Click Me</button> | |
{{input type='submit' click=trigger-thing value="Click Me"}} | |
</h1> | |
</script> | |
<script id="jsbin-javascript"> | |
App = Ember.Application.create({ | |
rootElement: '#app', | |
LOG_RESOLVER: true | |
}); | |
App.Router.map(function() { | |
}); | |
App.ApplicationRoute = Ember.Route.extend({ | |
actions: { | |
error: function(error) { | |
log(error.message); | |
} | |
} | |
}); | |
Ember.HTMLBars._registerHelper('bind-action', function(params, hash, options, env) { | |
var component = env.data.view; | |
var action = component._actions[params[0]]; | |
return function() { | |
action.apply(component, arguments); | |
} | |
}); | |
App.MyFooComponent = Ember.Component.extend({ | |
count: 0, | |
actions: { | |
'some-name': function() { | |
this.incrementProperty('count'); | |
log(this + ' did it! ' + this.count + ' times'); | |
} | |
} | |
}) | |
App.InnerFooComponent = Ember.Component.extend({ | |
actions: { | |
'i-was-clicked': function() { | |
this['trigger-thing'](); | |
} | |
} | |
}) | |
Ember.onerror = log; | |
function log() { | |
var msg = [].slice.call(arguments).join(' '); | |
logs.insertBefore(document.createTextNode("\n" + msg), logs.firstChild); | |
} | |
</script> | |
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
<html> | |
<head> | |
<meta name="description" content="[deprecated enber 1.12.2 bind-action example]"> | |
<meta charset="utf-8"> | |
<title>Ember Starter Kit</title> | |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css"> | |
<script src="https://code.jquery.com/jquery-1.11.1.min.js"><\/script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.12.2/ember.debug.js"><\/script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.12.2/ember-template-compiler.js"><\/script> | |
</head> | |
<body> | |
<div id='app'></div> | |
<pre id="logs"></pre> | |
<script type="text/x-handlebars"> | |
<h2>bind-action 'some-name' example</h2> | |
{{#my-foo as |stuff|}} | |
{{inner-foo trigger-thing=stuff}} | |
{{/my-foo}} | |
<\/script> | |
<script type="text/x-handlebars" data-template-name="components/my-foo"> | |
{{yield (bind-action 'some-name')}} | |
<\/script> | |
<script type="text/x-handlebars" data-template-name="components/inner-foo"> | |
<h1> | |
<button {{action "i-was-clicked"}}>Other Click Me</button> | |
{{input type='submit' click=trigger-thing value="Click Me"}} | |
</h1> | |
<\/script> | |
</body> | |
</html> | |
</script> | |
<script id="jsbin-source-css" type="text/css">/* Put your CSS here */ | |
html, body { | |
margin: 20px; | |
}</script> | |
<script id="jsbin-source-javascript" type="text/javascript">App = Ember.Application.create({ | |
rootElement: '#app', | |
LOG_RESOLVER: true | |
}); | |
App.Router.map(function() { | |
}); | |
App.ApplicationRoute = Ember.Route.extend({ | |
actions: { | |
error: function(error) { | |
log(error.message); | |
} | |
} | |
}); | |
Ember.HTMLBars._registerHelper('bind-action', function(params, hash, options, env) { | |
var component = env.data.view; | |
var action = component._actions[params[0]]; | |
return function() { | |
action.apply(component, arguments); | |
} | |
}); | |
App.MyFooComponent = Ember.Component.extend({ | |
count: 0, | |
actions: { | |
'some-name': function() { | |
this.incrementProperty('count'); | |
log(this + ' did it! ' + this.count + ' times'); | |
} | |
} | |
}) | |
App.InnerFooComponent = Ember.Component.extend({ | |
actions: { | |
'i-was-clicked': function() { | |
this['trigger-thing'](); | |
} | |
} | |
}) | |
Ember.onerror = log; | |
function log() { | |
var msg = [].slice.call(arguments).join(' '); | |
logs.insertBefore(document.createTextNode("\n" + msg), logs.firstChild); | |
}</script></body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Put your CSS here */ | |
html, body { | |
margin: 20px; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
App = Ember.Application.create({ | |
rootElement: '#app', | |
LOG_RESOLVER: true | |
}); | |
App.Router.map(function() { | |
}); | |
App.ApplicationRoute = Ember.Route.extend({ | |
actions: { | |
error: function(error) { | |
log(error.message); | |
} | |
} | |
}); | |
Ember.HTMLBars._registerHelper('bind-action', function(params, hash, options, env) { | |
var component = env.data.view; | |
var action = component._actions[params[0]]; | |
return function() { | |
action.apply(component, arguments); | |
} | |
}); | |
App.MyFooComponent = Ember.Component.extend({ | |
count: 0, | |
actions: { | |
'some-name': function() { | |
this.incrementProperty('count'); | |
log(this + ' did it! ' + this.count + ' times'); | |
} | |
} | |
}) | |
App.InnerFooComponent = Ember.Component.extend({ | |
actions: { | |
'i-was-clicked': function() { | |
this['trigger-thing'](); | |
} | |
} | |
}) | |
Ember.onerror = log; | |
function log() { | |
var msg = [].slice.call(arguments).join(' '); | |
logs.insertBefore(document.createTextNode("\n" + msg), logs.firstChild); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment