Skip to content

Instantly share code, notes, and snippets.

@lilac

lilac/index.html

Forked from anonymous/index.html
Last active August 29, 2015 14:21
Show Gist options
  • Save lilac/db2deb01cd04f9b88f5b to your computer and use it in GitHub Desktop.
Save lilac/db2deb01cd04f9b88f5b to your computer and use it in GitHub Desktop.
Download ZIP
Ember render with promise
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
<script src="http://builds.emberjs.com/tags/v1.8.0/ember.js"></script>
<style id="jsbin-css">
/* Put your CSS here */
html, body {
margin: 20px;
}
</style>
</head>
<body>
<script type="text/x-handlebars">
<h2>Render w/ Promise Proof of Concept</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
{{outlet}}
<div class="first">
{{render-with-promise "first" firstData}}
</div>
<div class="second">
{{render-with-promise "second" secondData}}
</div>
<div class="third">
{{render-with-promise "third" thirdData}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="first">
First: {{message}}
</script>
<script type="text/x-handlebars" data-template-name="first/loading">
Loading First...
</script>
<script type="text/x-handlebars" data-template-name="second">
Second: {{message}}
</script>
<script type="text/x-handlebars" data-template-name="second/loading">
Loading Second...
</script>
<script type="text/x-handlebars" data-template-name="third">
Third: {{message}}
</script>
<script type="text/x-handlebars" data-template-name="third/loading">
Loading Third...
</script>
<script type="text/x-handlebars" data-template-name="third/error">
Third: FAILED WITH REASON "{{reason}}"
</script>
<script type="text/x-handlebars" data-template-name="-render-with-promise">
{{#if isSettled}}
{{#if isFulfilled}}
{{outlet "fulfilled"}}
{{else}}
{{#if isRejected}}
{{outlet "rejected"}}
{{else}}
UNKNOWN STATE O SHIT
{{/if}}
{{/if}}
{{else}}
{{#if isPending}}
{{outlet "pending"}}
{{else}}
UNKNOWN STATE NOT PENDING FUCK
{{/if}}
{{/if}}
</script>
<script id="jsbin-javascript">
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return {
firstData: fakeFind({
message: 'IM THE FIRST'
}, 2000),
secondData: fakeFind({
message: 'I CAME IN SECOND...'
}, 5000),
thirdData: fakeFind({
message: 'IM GOING TO FAIL...'
}, 7000, true)
};
}
});
(function () {
var get = Ember.get;
var set = Ember.set;
var setProperties = Ember.setProperties;
var helpers = Ember.Handlebars.helpers;
var renderHelper = helpers.render;
var handlebarsGet = Ember.Handlebars.get;
var ViewHelper = Ember.Handlebars.ViewHelper;
var PromiseProxy = Ember.ObjectProxy.extend(Ember.PromiseProxyMixin);
function renderWithPromiseHelper(name, promiseKey, options) {
var container = options.data.keywords.controller.container;
var promise = handlebarsGet(options.contexts[0], promiseKey, options);
promise = PromiseProxy.create({
promise: promise
});
var bindView = container.lookup('view:default');
setProperties(bindView, {
templateName: '-render-with-promise',
context: promise
});
options.data.view.appendChild(bindView);
function connectView(bindView, outlet, name) {
var instanceHelperOriginal = ViewHelper.instanceHelper;
ViewHelper.instanceHelper = function (context, view, options) {
set(options, 'hash.controller.model', promise);
setProperties(view, options.hash);
options.hash = {};
bindView.connectOutlet(outlet, view);
ViewHelper.instanceHelper = instanceHelperOriginal;
};
renderHelper.call(bindView, name, promiseKey, options);
}
function hasSubstate(state) {
return container.has('view:' + state) || container.has('template:' + state);
}
connectView(bindView, 'fulfilled', name);
if (hasSubstate(name + '.loading')) {
connectView(bindView, 'pending', name + '.loading');
}
if (hasSubstate(name + '.error')) {
connectView(bindView, 'rejected', name + '.error');
}
}
Ember.Handlebars.registerHelper('render-with-promise', renderWithPromiseHelper);
})();
function fakeFind(data, duration, shouldReject) {
return new Ember.RSVP.Promise(function (resolve, reject) {
Ember.run.later(function () {
if (shouldReject) {
reject('O NOES IT DIDNT WORK');
} else {
resolve(Ember.Object.create(data));
}
}, duration);
});
}
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"><\/script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"><\/script>
<script src="http://builds.emberjs.com/tags/v1.8.0/ember.js"><\/script>
</head>
<body>
<script type="text/x-handlebars">
<h2>Render w/ Promise Proof of Concept</h2>
{{outlet}}
<\/script>
<script type="text/x-handlebars" data-template-name="index">
{{outlet}}
<div class="first">
{{render-with-promise "first" firstData}}
</div>
<div class="second">
{{render-with-promise "second" secondData}}
</div>
<div class="third">
{{render-with-promise "third" thirdData}}
</div>
<\/script>
<script type="text/x-handlebars" data-template-name="first">
First: {{message}}
<\/script>
<script type="text/x-handlebars" data-template-name="first/loading">
Loading First...
<\/script>
<script type="text/x-handlebars" data-template-name="second">
Second: {{message}}
<\/script>
<script type="text/x-handlebars" data-template-name="second/loading">
Loading Second...
<\/script>
<script type="text/x-handlebars" data-template-name="third">
Third: {{message}}
<\/script>
<script type="text/x-handlebars" data-template-name="third/loading">
Loading Third...
<\/script>
<script type="text/x-handlebars" data-template-name="third/error">
Third: FAILED WITH REASON "{{reason}}"
<\/script>
<script type="text/x-handlebars" data-template-name="-render-with-promise">
{{#if isSettled}}
{{#if isFulfilled}}
{{outlet "fulfilled"}}
{{else}}
{{#if isRejected}}
{{outlet "rejected"}}
{{else}}
UNKNOWN STATE O SHIT
{{/if}}
{{/if}}
{{else}}
{{#if isPending}}
{{outlet "pending"}}
{{else}}
UNKNOWN STATE NOT PENDING FUCK
{{/if}}
{{/if}}
<\/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();
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return {
firstData: fakeFind({
message: 'IM THE FIRST'
}, 2000),
secondData: fakeFind({
message: 'I CAME IN SECOND...'
}, 5000),
thirdData: fakeFind({
message: 'IM GOING TO FAIL...'
}, 7000, true)
};
}
});
(function () {
var get = Ember.get;
var set = Ember.set;
var setProperties = Ember.setProperties;
var helpers = Ember.Handlebars.helpers;
var renderHelper = helpers.render;
var handlebarsGet = Ember.Handlebars.get;
var ViewHelper = Ember.Handlebars.ViewHelper;
var PromiseProxy = Ember.ObjectProxy.extend(Ember.PromiseProxyMixin);
function renderWithPromiseHelper(name, promiseKey, options) {
var container = options.data.keywords.controller.container;
var promise = handlebarsGet(options.contexts[0], promiseKey, options);
promise = PromiseProxy.create({
promise: promise
});
var bindView = container.lookup('view:default');
setProperties(bindView, {
templateName: '-render-with-promise',
context: promise
});
options.data.view.appendChild(bindView);
function connectView(bindView, outlet, name) {
var instanceHelperOriginal = ViewHelper.instanceHelper;
ViewHelper.instanceHelper = function (context, view, options) {
set(options, 'hash.controller.model', promise);
setProperties(view, options.hash);
options.hash = {};
bindView.connectOutlet(outlet, view);
ViewHelper.instanceHelper = instanceHelperOriginal;
};
renderHelper.call(bindView, name, promiseKey, options);
}
function hasSubstate(state) {
return container.has('view:' + state) || container.has('template:' + state);
}
connectView(bindView, 'fulfilled', name);
if (hasSubstate(name + '.loading')) {
connectView(bindView, 'pending', name + '.loading');
}
if (hasSubstate(name + '.error')) {
connectView(bindView, 'rejected', name + '.error');
}
}
Ember.Handlebars.registerHelper('render-with-promise', renderWithPromiseHelper);
})();
function fakeFind(data, duration, shouldReject) {
return new Ember.RSVP.Promise(function (resolve, reject) {
Ember.run.later(function () {
if (shouldReject) {
reject('O NOES IT DIDNT WORK');
} else {
resolve(Ember.Object.create(data));
}
}, duration);
});
}</script></body>
</html>
Raw
jsbin.coqupicoqo.css
/* Put your CSS here */
html, body {
margin: 20px;
}
Raw
jsbin.coqupicoqo.js
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return {
firstData: fakeFind({
message: 'IM THE FIRST'
}, 2000),
secondData: fakeFind({
message: 'I CAME IN SECOND...'
}, 5000),
thirdData: fakeFind({
message: 'IM GOING TO FAIL...'
}, 7000, true)
};
}
});
(function () {
var get = Ember.get;
var set = Ember.set;
var setProperties = Ember.setProperties;
var helpers = Ember.Handlebars.helpers;
var renderHelper = helpers.render;
var handlebarsGet = Ember.Handlebars.get;
var ViewHelper = Ember.Handlebars.ViewHelper;
var PromiseProxy = Ember.ObjectProxy.extend(Ember.PromiseProxyMixin);
function renderWithPromiseHelper(name, promiseKey, options) {
var container = options.data.keywords.controller.container;
var promise = handlebarsGet(options.contexts[0], promiseKey, options);
promise = PromiseProxy.create({
promise: promise
});
var bindView = container.lookup('view:default');
setProperties(bindView, {
templateName: '-render-with-promise',
context: promise
});
options.data.view.appendChild(bindView);
function connectView(bindView, outlet, name) {
var instanceHelperOriginal = ViewHelper.instanceHelper;
ViewHelper.instanceHelper = function (context, view, options) {
set(options, 'hash.controller.model', promise);
setProperties(view, options.hash);
options.hash = {};
bindView.connectOutlet(outlet, view);
ViewHelper.instanceHelper = instanceHelperOriginal;
};
renderHelper.call(bindView, name, promiseKey, options);
}
function hasSubstate(state) {
return container.has('view:' + state) || container.has('template:' + state);
}
connectView(bindView, 'fulfilled', name);
if (hasSubstate(name + '.loading')) {
connectView(bindView, 'pending', name + '.loading');
}
if (hasSubstate(name + '.error')) {
connectView(bindView, 'rejected', name + '.error');
}
}
Ember.Handlebars.registerHelper('render-with-promise', renderWithPromiseHelper);
})();
function fakeFind(data, duration, shouldReject) {
return new Ember.RSVP.Promise(function (resolve, reject) {
Ember.run.later(function () {
if (shouldReject) {
reject('O NOES IT DIDNT WORK');
} else {
resolve(Ember.Object.create(data));
}
}, duration);
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment