Skip to content

T
todomvc
Commit 7be1d104 authored by Sam Saccone's avatar Sam Saccone
Browse files
Options

Merge pull request #1178 from txchen/riotjs 

Add riot.js 2.0 example
parents 6b12eb31 63611db5
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1090 additions and 0 deletions
examples/riotjs/.editorconfig 0 → 100644
View file @ 7be1d104
root = true
[*]
indent_style = tab
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[package.json]
indent_style = space
indent_size = 2
[*.md]
trim_trailing_whitespace = false
examples/riotjs/.gitignore 0 → 100644
View file @ 7be1d104
node_modules/todomvc-app-css/*
!node_modules/todomvc-app-css/index.css
node_modules/todomvc-common/*
!node_modules/todomvc-common/base.css
!node_modules/todomvc-common/base.js
node_modules/.bin
node_modules/riot/*
!node_modules/riot/riot.min.js
!node_modules/riot/riot+compiler.min.js
examples/riotjs/index.html 0 → 100644
View file @ 7be1d104
<!doctype html>
<html lang="en" data-framework="riotjs">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Riot.js • TodoMVC</title>
<link rel="stylesheet" href="node_modules/todomvc-common/base.css">
<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
</head>
<body>
<todo></todo>
<script src="node_modules/todomvc-common/base.js"></script>
<script src="js/todo.html" type="riot/tag"></script>
<script src="node_modules/riot/riot+compiler.min.js"></script>
<script src="js/store.js"></script>
<script src="js/app.js"></script>
</body>
</html>
examples/riotjs/js/app.js 0 → 100644
View file @ 7be1d104
/*global riot, todoStorage */
(function () {
'use strict';
riot.mount('todo', { data: todoStorage.fetch() });
}());
examples/riotjs/js/store.js 0 → 100644
View file @ 7be1d104
(function (exports) {
'use strict';
var STORAGE_KEY = 'todos-riotjs';
exports.todoStorage = {
fetch: function () {
return JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
},
save: function (todos) {
localStorage.setItem(STORAGE_KEY, JSON.stringify(todos));
}
};
})(window);
examples/riotjs/js/todo.html 0 → 100644
View file @ 7be1d104
/*global riot, todoStorage */
<todo>
<section class="todoapp">
<header class="header">
<h1>todos</h1>
<input class="new-todo" autofocus autocomplete="off" placeholder="What needs to be done?" onkeyup={ addTodo }>
</header>
<section class="main" show={ todos.length }>
<input class="toggle-all" type="checkbox" checked={ allDone } onclick={ toggleAll }>
<ul class="todo-list">
<li riot-tag="todoitem" class="todo { completed: t.completed, editing: t.editing }"
each={ t, i in filteredTodos() } todo={ t } parentview={ parent }></li>
</ul>
</section>
<footer class="footer" show={ todos.length }>
<span class="todo-count">
<strong>{ remaining }</strong> { remaining === 1 ? 'item' : 'items' } left
</span>
<ul class="filters">
<li><a class={ selected: activeFilter=='all' } href="#/all">All</a></li>
<li><a class={ selected: activeFilter=='active' } href="#/active">Active</a></li>
<li><a class={ selected: activeFilter=='completed' } href="#/completed">Completed</a></li>
</ul>
<button class="clear-completed" onclick={ removeCompleted } show={ todos.length > remaining }>
Clear completed</button>
</footer>
</section>
<footer class="info">
<p>Double-click to edit a todo</p>
<p>Written by <a href="http://github.com/txchen">Tianxiang Chen</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script>
'use strict';
var ENTER_KEY = 13;
var self = this;
self.todos = opts.data || [];
riot.route.exec(function(base, filter) {
self.activeFilter = filter || 'all';
});
self.on('update', function() {
self.remaining = self.todos.filter(function(t) {
return !t.completed;
}).length;
self.allDone = self.remaining === 0;
self.saveTodos();
});
saveTodos() {
todoStorage.save(self.todos);
self.update();
};
filteredTodos() {
if (self.activeFilter === 'active') {
return self.todos.filter(function(t) {
return !t.completed;
});
} else if (self.activeFilter === 'completed') {
return self.todos.filter(function(t) {
return t.completed;
});
} else {
return self.todos;
}
};
addTodo(e) {
if (e.which === ENTER_KEY) {
var value = e.target.value && e.target.value.trim();
if (!value) {
return;
}
self.todos.push({ title: value, completed: false });
e.target.value = '';
}
};
removeTodo(todo) {
self.todos.some(function (t) {
if (todo === t) {
self.todos.splice(self.todos.indexOf(t), 1);
}
});
self.update();
};
toggleAll(e) {
self.todos.forEach(function (t) {
t.completed = e.target.checked;
});
return true;
};
removeCompleted() {
self.todos = self.todos.filter(function(t) {
return !t.completed;
});
};
riot.route(function(base, filter) {
self.activeFilter = filter;
self.update();
});
</script>
</todo>
<todoitem>
<div class="view">
<input class="toggle" type="checkbox" checked={ opts.todo.completed } onclick={ toggleTodo }>
<label ondblclick={ editTodo }>{ opts.todo.title }</label>
<button class="destroy" onclick={ removeTodo }></button>
</div>
<input name="todoeditbox" class="edit" type="text" onblur={ doneEdit } onkeyup={ editKeyUp }>
<script>
'use strict';
var ENTER_KEY = 13;
var ESC_KEY = 27;
var self = this;
opts.todo.editing = false;
toggleTodo() {
opts.todo.completed = !opts.todo.completed;
opts.parentview.saveTodos();
return true;
};
editTodo() {
opts.todo.editing = true;
self.todoeditbox.value = opts.todo.title;
};
removeTodo() {
opts.parentview.removeTodo(opts.todo);
};
doneEdit() {
if (!opts.todo.editing) {
return;
}
opts.todo.editing = false;
var enteredText = self.todoeditbox.value && self.todoeditbox.value.trim();
if (enteredText) {
opts.todo.title = enteredText;
opts.parentview.saveTodos();
} else {
self.removeTodo();
}
};
editKeyUp(e) {
if (e.which === ENTER_KEY) {
self.doneEdit();
} else if (e.which === ESC_KEY) {
self.todoeditbox.value = opts.todo.title;
self.doneEdit();
}
};
self.on('update', function() {
if (opts.todo.editing) {
opts.parentview.update();
self.todoeditbox.focus();
}
});
</script>
</todoitem>
examples/riotjs/node_modules/riot/riot+compiler.min.js 0 → 100644
View file @ 7be1d104
This diff is collapsed.
examples/riotjs/node_modules/riot/riot.min.js 0 → 100644
View file @ 7be1d104
This diff is collapsed.
examples/riotjs/node_modules/todomvc-app-css/index.css 0 → 100644
View file @ 7be1d104
html,
body {
margin: 0;
padding: 0;
}
button {
margin: 0;
padding: 0;
border: 0;
background: none;
font-size: 100%;
vertical-align: baseline;
font-family: inherit;
font-weight: inherit;
color: inherit;
-webkit-appearance: none;
appearance: none;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
}
body {
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
line-height: 1.4em;
background: #f5f5f5;
color: #4d4d4d;
min-width: 230px;
max-width: 550px;
margin: 0 auto;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
font-weight: 300;
}
button,
input[type="checkbox"] {
outline: none;
}
.hidden {
display: none;
}
.todoapp {
background: #fff;
margin: 130px 0 40px 0;
position: relative;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
0 25px 50px 0 rgba(0, 0, 0, 0.1);
}
.todoapp input::-webkit-input-placeholder {
font-style: italic;
font-weight: 300;
color: #e6e6e6;
}
.todoapp input::-moz-placeholder {
font-style: italic;
font-weight: 300;
color: #e6e6e6;
}
.todoapp input::input-placeholder {
font-style: italic;
font-weight: 300;
color: #e6e6e6;
}
.todoapp h1 {
position: absolute;
top: -155px;
width: 100%;
font-size: 100px;
font-weight: 100;
text-align: center;
color: rgba(175, 47, 47, 0.15);
-webkit-text-rendering: optimizeLegibility;
-moz-text-rendering: optimizeLegibility;
text-rendering: optimizeLegibility;
}
.new-todo,
.edit {
position: relative;
margin: 0;
width: 100%;
font-size: 24px;
font-family: inherit;
font-weight: inherit;
line-height: 1.4em;
border: 0;
outline: none;
color: inherit;
padding: 6px;
border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
}
.new-todo {
padding: 16px 16px 16px 60px;
border: none;
background: rgba(0, 0, 0, 0.003);
box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
}
.main {
position: relative;
z-index: 2;
border-top: 1px solid #e6e6e6;
}
label[for='toggle-all'] {
display: none;
}
.toggle-all {
position: absolute;
top: -55px;
left: -12px;
width: 60px;
height: 34px;
text-align: center;
border: none; /* Mobile Safari */
}
.toggle-all:before {
content: '❯';
font-size: 22px;
color: #e6e6e6;
padding: 10px 27px 10px 27px;
}
.toggle-all:checked:before {
color: #737373;
}
.todo-list {
margin: 0;
padding: 0;
list-style: none;
}
.todo-list li {
position: relative;
font-size: 24px;
border-bottom: 1px solid #ededed;
}
.todo-list li:last-child {
border-bottom: none;
}
.todo-list li.editing {
border-bottom: none;
padding: 0;
}
.todo-list li.editing .edit {
display: block;
width: 506px;
padding: 13px 17px 12px 17px;
margin: 0 0 0 43px;
}
.todo-list li.editing .view {
display: none;
}
.todo-list li .toggle {
text-align: center;
width: 40px;
/* auto, since non-WebKit browsers doesn't support input styling */
height: auto;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
border: none; /* Mobile Safari */
-webkit-appearance: none;
appearance: none;
}
.todo-list li .toggle:after {
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>');
}
.todo-list li .toggle:checked:after {
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>');
}
.todo-list li label {
white-space: pre;
word-break: break-word;
padding: 15px 60px 15px 15px;
margin-left: 45px;
display: block;
line-height: 1.2;
transition: color 0.4s;
}
.todo-list li.completed label {
color: #d9d9d9;
text-decoration: line-through;
}
.todo-list li .destroy {
display: none;
position: absolute;
top: 0;
right: 10px;
bottom: 0;
width: 40px;
height: 40px;
margin: auto 0;
font-size: 30px;
color: #cc9a9a;
margin-bottom: 11px;
transition: color 0.2s ease-out;
}
.todo-list li .destroy:hover {
color: #af5b5e;
}
.todo-list li .destroy:after {
content: '×';
}
.todo-list li:hover .destroy {
display: block;
}
.todo-list li .edit {
display: none;
}
.todo-list li.editing:last-child {
margin-bottom: -1px;
}
.footer {
color: #777;
padding: 10px 15px;
height: 20px;
text-align: center;
border-top: 1px solid #e6e6e6;
}
.footer:before {
content: '';
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 50px;
overflow: hidden;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
0 8px 0 -3px #f6f6f6,
0 9px 1px -3px rgba(0, 0, 0, 0.2),
0 16px 0 -6px #f6f6f6,
0 17px 2px -6px rgba(0, 0, 0, 0.2);
}
.todo-count {
float: left;
text-align: left;
}
.todo-count strong {
font-weight: 300;
}
.filters {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
right: 0;
left: 0;
}
.filters li {
display: inline;
}
.filters li a {
color: inherit;
margin: 3px;
padding: 3px 7px;
text-decoration: none;
border: 1px solid transparent;
border-radius: 3px;
}
.filters li a.selected,
.filters li a:hover {
border-color: rgba(175, 47, 47, 0.1);
}
.filters li a.selected {
border-color: rgba(175, 47, 47, 0.2);
}
.clear-completed,
html .clear-completed:active {
float: right;
position: relative;
line-height: 20px;
text-decoration: none;
cursor: pointer;
position: relative;
}
.clear-completed:hover {
text-decoration: underline;
}
.info {
margin: 65px auto 0;
color: #bfbfbf;
font-size: 10px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
text-align: center;
}
.info p {
line-height: 1;
}
.info a {
color: inherit;
text-decoration: none;
font-weight: 400;
}
.info a:hover {
text-decoration: underline;
}
/*
Hack to remove background from Mobile Safari.
Can't use it globally since it destroys checkboxes in Firefox
*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
.toggle-all,
.todo-list li .toggle {
background: none;
}
.todo-list li .toggle {
height: 40px;
}
.toggle-all {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-appearance: none;
appearance: none;
}
}
@media (max-width: 430px) {
.footer {
height: 50px;
}
.filters {
bottom: 10px;
}
}
examples/riotjs/node_modules/todomvc-common/base.css 0 → 100644
View file @ 7be1d104
hr {
margin: 20px 0;
border: 0;
border-top: 1px dashed #c5c5c5;
border-bottom: 1px dashed #f7f7f7;
}
.learn a {
font-weight: normal;
text-decoration: none;
color: #b83f45;
}
.learn a:hover {
text-decoration: underline;
color: #787e7e;
}
.learn h3,
.learn h4,
.learn h5 {
margin: 10px 0;
font-weight: 500;
line-height: 1.2;
color: #000;
}
.learn h3 {
font-size: 24px;
}
.learn h4 {
font-size: 18px;
}
.learn h5 {
margin-bottom: 0;
font-size: 14px;
}
.learn ul {
padding: 0;
margin: 0 0 30px 25px;
}
.learn li {
line-height: 20px;
}
.learn p {
font-size: 15px;
font-weight: 300;
line-height: 1.3;
margin-top: 0;
margin-bottom: 0;
}
#issue-count {
display: none;
}
.quote {
border: none;
margin: 20px 0 60px 0;
}
.quote p {
font-style: italic;
}
.quote p:before {
content: '“';
font-size: 50px;
opacity: .15;
position: absolute;
top: -20px;
left: 3px;
}
.quote p:after {
content: '”';
font-size: 50px;
opacity: .15;
position: absolute;
bottom: -42px;
right: 3px;
}
.quote footer {
position: absolute;
bottom: -40px;
right: 0;
}
.quote footer img {
border-radius: 3px;
}
.quote footer a {
margin-left: 5px;
vertical-align: middle;
}
.speech-bubble {
position: relative;
padding: 10px;
background: rgba(0, 0, 0, .04);
border-radius: 5px;
}
.speech-bubble:after {
content: '';
position: absolute;
top: 100%;
right: 30px;
border: 13px solid transparent;
border-top-color: rgba(0, 0, 0, .04);
}
.learn-bar > .learn {
position: absolute;
width: 272px;
top: 8px;
left: -300px;
padding: 10px;
border-radius: 5px;
background-color: rgba(255, 255, 255, .6);
transition-property: left;
transition-duration: 500ms;
}
@media (min-width: 899px) {
.learn-bar {
width: auto;
padding-left: 300px;
}
.learn-bar > .learn {
left: 8px;
}
}
examples/riotjs/node_modules/todomvc-common/base.js 0 → 100644
View file @ 7be1d104
/* global _ */
(function () {
'use strict';
/* jshint ignore:start */
// Underscore's Template Module
// Courtesy of underscorejs.org
var _ = (function (_) {
_.defaults = function (object) {
if (!object) {
return object;
}
for (var argsIndex = 1, argsLength = arguments.length; argsIndex < argsLength; argsIndex++) {
var iterable = arguments[argsIndex];
if (iterable) {
for (var key in iterable) {
if (object[key] == null) {
object[key] = iterable[key];
}
}
}
}
return object;
}
// By default, Underscore uses ERB-style template delimiters, change the
// following template settings to use alternative delimiters.
_.templateSettings = {
evaluate : /<%([\s\S]+?)%>/g,
interpolate : /<%=([\s\S]+?)%>/g,
escape : /<%-([\s\S]+?)%>/g
};
// When customizing `templateSettings`, if you don't want to define an
// interpolation, evaluation or escaping regex, we need one that is
// guaranteed not to match.
var noMatch = /(.)^/;
// Certain characters need to be escaped so that they can be put into a
// string literal.
var escapes = {
"'": "'",
'\\': '\\',
'\r': 'r',
'\n': 'n',
'\t': 't',
'\u2028': 'u2028',
'\u2029': 'u2029'
};
var escaper = /\\|'|\r|\n|\t|\u2028|\u2029/g;
// JavaScript micro-templating, similar to John Resig's implementation.
// Underscore templating handles arbitrary delimiters, preserves whitespace,
// and correctly escapes quotes within interpolated code.
_.template = function(text, data, settings) {
var render;
settings = _.defaults({}, settings, _.templateSettings);
// Combine delimiters into one regular expression via alternation.
var matcher = new RegExp([
(settings.escape || noMatch).source,
(settings.interpolate || noMatch).source,
(settings.evaluate || noMatch).source
].join('|') + '|$', 'g');
// Compile the template source, escaping string literals appropriately.
var index = 0;
var source = "__p+='";
text.replace(matcher, function(match, escape, interpolate, evaluate, offset) {
source += text.slice(index, offset)
.replace(escaper, function(match) { return '\\' + escapes[match]; });
if (escape) {
source += "'+\n((__t=(" + escape + "))==null?'':_.escape(__t))+\n'";
}
if (interpolate) {
source += "'+\n((__t=(" + interpolate + "))==null?'':__t)+\n'";
}
if (evaluate) {
source += "';\n" + evaluate + "\n__p+='";
}
index = offset + match.length;
return match;
});
source += "';\n";
// If a variable is not specified, place data values in local scope.
if (!settings.variable) source = 'with(obj||{}){\n' + source + '}\n';
source = "var __t,__p='',__j=Array.prototype.join," +
"print=function(){__p+=__j.call(arguments,'');};\n" +
source + "return __p;\n";
try {
render = new Function(settings.variable || 'obj', '_', source);
} catch (e) {
e.source = source;
throw e;
}
if (data) return render(data, _);
var template = function(data) {
return render.call(this, data, _);
};
// Provide the compiled function source as a convenience for precompilation.
template.source = 'function(' + (settings.variable || 'obj') + '){\n' + source + '}';
return template;
};
return _;
})({});
if (location.hostname === 'todomvc.com') {
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-31081062-1', 'auto');
ga('send', 'pageview');
}
/* jshint ignore:end */
function redirect() {
if (location.hostname === 'tastejs.github.io') {
location.href = location.href.replace('tastejs.github.io/todomvc', 'todomvc.com');
}
}
function findRoot() {
var base = location.href.indexOf('examples/');
return location.href.substr(0, base);
}
function getFile(file, callback) {
if (!location.host) {
return console.info('Miss the info bar? Run TodoMVC from a server to avoid a cross-origin error.');
}
var xhr = new XMLHttpRequest();
xhr.open('GET', findRoot() + file, true);
xhr.send();
xhr.onload = function () {
if (xhr.status === 200 && callback) {
callback(xhr.responseText);
}
};
}
function Learn(learnJSON, config) {
if (!(this instanceof Learn)) {
return new Learn(learnJSON, config);
}
var template, framework;
if (typeof learnJSON !== 'object') {
try {
learnJSON = JSON.parse(learnJSON);
} catch (e) {
return;
}
}
if (config) {
template = config.template;
framework = config.framework;
}
if (!template && learnJSON.templates) {
template = learnJSON.templates.todomvc;
}
if (!framework && document.querySelector('[data-framework]')) {
framework = document.querySelector('[data-framework]').dataset.framework;
}
this.template = template;
if (learnJSON.backend) {
this.frameworkJSON = learnJSON.backend;
this.frameworkJSON.issueLabel = framework;
this.append({
backend: true
});
} else if (learnJSON[framework]) {
this.frameworkJSON = learnJSON[framework];
this.frameworkJSON.issueLabel = framework;
this.append();
}
this.fetchIssueCount();
}
Learn.prototype.append = function (opts) {
var aside = document.createElement('aside');
aside.innerHTML = _.template(this.template, this.frameworkJSON);
aside.className = 'learn';
if (opts && opts.backend) {
// Remove demo link
var sourceLinks = aside.querySelector('.source-links');
var heading = sourceLinks.firstElementChild;
var sourceLink = sourceLinks.lastElementChild;
// Correct link path
var href = sourceLink.getAttribute('href');
sourceLink.setAttribute('href', href.substr(href.lastIndexOf('http')));
sourceLinks.innerHTML = heading.outerHTML + sourceLink.outerHTML;
} else {
// Localize demo links
var demoLinks = aside.querySelectorAll('.demo-link');
Array.prototype.forEach.call(demoLinks, function (demoLink) {
if (demoLink.getAttribute('href').substr(0, 4) !== 'http') {
demoLink.setAttribute('href', findRoot() + demoLink.getAttribute('href'));
}
});
}
document.body.className = (document.body.className + ' learn-bar').trim();
document.body.insertAdjacentHTML('afterBegin', aside.outerHTML);
};
Learn.prototype.fetchIssueCount = function () {
var issueLink = document.getElementById('issue-count-link');
if (issueLink) {
var url = issueLink.href.replace('https://github.com', 'https://api.github.com/repos');
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onload = function (e) {
var parsedResponse = JSON.parse(e.target.responseText);
if (parsedResponse instanceof Array) {
var count = parsedResponse.length;
if (count !== 0) {
issueLink.innerHTML = 'This app has ' + count + ' open issues';
document.getElementById('issue-count').style.display = 'inline';
}
}
};
xhr.send();
}
};
redirect();
getFile('learn.json', Learn);
})();
examples/riotjs/package.json 0 → 100644
View file @ 7be1d104
{
"private": true,
"dependencies": {
"todomvc-app-css": "^2.0.0",
"todomvc-common": "^1.0.1",
"riot": "^2.2.4"
}
}
examples/riotjs/readme.md 0 → 100644
View file @ 7be1d104
# Riot.js TodoMVC Example
> Riot.js is a React-like user interface micro-library.
> Riot is against the current trend of boilerplate and unneeded complexity. The team think that a small, powerful API and concise syntax are extremely important things on a client-side library.
> _[Riot.js - riotjs.com](http://riotjs.com/)_
## Resources
- [Website](http://riotjs.com/)
- [Documentation](http://riotjs.com/guide/)
- [FAQ](http://riotjs.com/faq/)
### Articles
- [Compare Riot with React and Polymer](http://riotjs.com/compare/)
- [The react tutorial for riot](https://juriansluiman.nl/article/154/the-react-tutorial-for-riot)
### Support
- [Gitter chat room](https://gitter.im/riot/riot)
*Let us [know](https://github.com/tastejs/todomvc/issues) if you discover anything worth sharing.*
## Implementation
Riot is tiny and super flexible, there are many different ways to use riot. For example, you can use compiler to compile the tags files, you can also use browserify to build bundled javascript, you can even use the tiny Riot compiler on your page and compile tags on the fly.
This example is using compiler on the page to compile the tag file(js/todo.html).
This example is following TodoMvc's [coding style](https://github.com/tastejs/todomvc/blob/master/codestyle.md), however officially Riot recommend [different coding style](https://github.com/riot/riot/blob/master/CONTRIBUTING.md), FYI.
## Credit
Created by [Tianxiang Chen](https://github.com/txchen)
index.html
View file @ 7be1d104
...@@ -275,6 +275,9 @@ ...@@ -275,6 +275,9 @@
<li> <li>
<a href="examples/angular2/" data-source="http://angular.io" data-content="Angular is a development platform for building mobile and desktop web applications">Angular 2.0</a> <a href="examples/angular2/" data-source="http://angular.io" data-content="Angular is a development platform for building mobile and desktop web applications">Angular 2.0</a>
</li> </li>
<li class="routing">
<a href="examples/riotjs/" data-source="http://riotjs.com/" data-content="Riot.js is a React-like user interface micro-library.">Riot</a>
</li>
</ul> </ul>
</div> </div>
......
learn.json
View file @ 7be1d104
...@@ -1769,6 +1769,37 @@ ...@@ -1769,6 +1769,37 @@
}] }]
}] }]
}, },
"riotjs": {
"name": "Riot.js",
"description": "Riot.js is a React-like user interface micro-library.",
"homepage": "http://riotjs.com/",
"examples": [{
"name": "Example",
"url": "examples/riotjs"
}],
"link_groups": [{
"heading": "Official Resources",
"links": [{
"name": "Documentation",
"url": "http://riotjs.com/guide/"
}, {
"name": "API Reference",
"url": "http://riotjs.com/api/"
}, {
"name": "Examples",
"url": "https://github.com/riot/riot#demos"
}, {
"name": "Riot.js on GitHub",
"url": "https://github.com/riot/riot"
}]
}, {
"heading": "Community",
"links": [{
"name": "Gitter chat room",
"url": "https://gitter.im/riot/riot"
}]
}]
},
"sammyjs": { "sammyjs": {
"name": "Sammy.js", "name": "Sammy.js",
"description": "A small web framework with class.", "description": "A small web framework with class.",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7