forked from lluchs/Ractive-adaptors-Promise
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
103 lines (86 loc) · 3.45 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!doctype html>
<html lang='en-GB'>
<head>
<meta charset='utf-8'>
<title>Ractive.js Promise adaptor plugin</title>
<!-- CSS -->
<link href='http://fonts.googleapis.com/css?family=Voltaire' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='demo/main.css'>
<!-- styles specific to this demo -->
<style type='text/css'>
/* none! */
</style>
</head>
<body>
<!-- if the project is on GitHub, add a fork me button! -->
<a class='forkme' href='https://github.com/lluchs/Ractive-adaptors-Promise'>Fork me on GitHub</a>
<header>
<h1>Ractive.js Promise adaptor plugin</h1>
<p class='strap'>
<span class='download'>download: <a href='Ractive-adaptors-Promise.js'>Ractive-adaptors-Promise.js</a></span>
<span class='more-plugins'>more plugins at <a href='http://ractivejs.org/plugins'>ractivejs.org/plugins</a></span>
</p>
</header>
<main>
<p>This plugin allows adding <a href="http://promises-aplus.github.io/promises-spec/">promises</a> directly as Ractive data objects. The promise will then be replaced by the object it resolved to.</p>
<p>If you're replacing a promise before it resolved to something, the wrapper takes care not to show any intermediate values. This makes it possible to issue requests as the user types something, for example with <code>ractive.observe</code>.</p>
<p>The following demo uses jQuery's AJAX function to query Ractive issues by id from GitHub's api as you type. It uses promise chaining to modify the returned object in the error case.</p>
<p><small>Two caveats with the demo: It uses CORS, so you need a recent browser. The promise adaptor should work everywhere though. Second, GitHub's anonymous API is heavily rate limited, so you'll get errors if you're clicking around too much.</small></p>
<div id='demo' class='clearfix'></div>
<pre id='demo-template-view' class='prettyprint lang-html'></pre>
<pre id='demo-code-view' class='prettyprint lang-js'></pre>
</main>
<!-- add additional info such as your homepage here, if you want -->
<footer>
<p>Copyright © 2013 Lukas Werling. Licensed MIT</p>
</footer>
<!-- Demo template -->
<script id='demo-template' type='text/ractive'>
<p>
Enter an issue number: <input type='number' value='{{id}}' min='1'>
</p>
{{# getIssue(id) }}
{{#error}}
<p><strong>Error: {{message}}</strong></p>
{{/error}}
{{^error}}
<h3>{{title}}</h3>
<p>{{{ toHTML(body) }}}</p>
{{/error}}
{{/issue}}
</script>
<!-- Dependencies -->
<script src='http://code.jquery.com/jquery-2.0.3.min.js'></script>
<script src='lib/showdown.js'></script>
<script src='lib/Ractive-legacy.js'></script>
<script src='Ractive-adaptors-Promise.js'></script>
<!-- Demo code -->
<script id='demo-code'>
// Markdown converter
converter = new Showdown.converter();
ractive = new Ractive({
el: 'demo',
template: '#demo-template',
adaptors: [ 'Promise' ],
data: {
id: 1,
toHTML: function ( md ) {
return converter.makeHtml( md );
},
getIssue: function ( id ) {
return $.getJSON( 'https://api.github.com/repos/RactiveJS/Ractive/issues/' + id )
.then( null, function ( xhr ) {
// Handle errors such as 404.
// Note that jQuery returns another promise in this case
// which causes an infinite loop.
return { error: xhr.responseJSON };
});
}
}
});
</script>
<!-- Insert code into the page -->
<script src='demo/prettify.js'></script>
<script src='demo/demo.js'></script>
</body>
</html>