Skip to content

Instantly share code, notes, and snippets.

@valerysntx

valerysntx/index.html

Created August 27, 2019 13:48
Show Gist options
  • Save valerysntx/a8d2b6e0cc82f3935f44fa08f6078741 to your computer and use it in GitHub Desktop.
Save valerysntx/a8d2b6e0cc82f3935f44fa08f6078741 to your computer and use it in GitHub Desktop.
Download ZIP
Ember Starter Kit [deprecated enber 1.12.2 bind-action example] // source https://jsbin.com/teciyag
Raw
index.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>
<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>
Raw
jsbin.teciyag.css
/* Put your CSS here */
html, body {
margin: 20px;
}
Raw
jsbin.teciyag.js
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