Commit 41c49315 authored by Arthur Verschaeve's avatar Arthur Verschaeve

Merge pull request #1340 from tastejs/react-backbone-update

Updates to the `react-backbone` example
parents e490a942 45aaedcb
...@@ -12,9 +12,12 @@ node_modules/jquery/dist/* ...@@ -12,9 +12,12 @@ node_modules/jquery/dist/*
node_modules/react/* node_modules/react/*
!node_modules/react/dist !node_modules/react/dist
node_modules/react/dist/* node_modules/react/dist/*
!node_modules/react/dist/react-with-addons.js !node_modules/react/dist/react.js
!node_modules/react/dist/JSXTransformer.js !node_modules/react/dist/JSXTransformer.js
node_modules/classnames/*
!node_modules/classnames/index.js
node_modules/todomvc-app-css/* node_modules/todomvc-app-css/*
!node_modules/todomvc-app-css/index.css !node_modules/todomvc-app-css/index.css
......
...@@ -11,13 +11,14 @@ ...@@ -11,13 +11,14 @@
<section id="todoapp"></section> <section id="todoapp"></section>
<footer id="info"> <footer id="info">
<p>Double-click to edit a todo</p> <p>Double-click to edit a todo</p>
<p>Created by <a href="http://github.com/petehunt/">petehunt</a></p> <p>Created by <a href="http://github.com/petehunt/">Pete Hunt</a></p>
<p>Part of<a href="http://todomvc.com">TodoMVC</a></p> <p>Part of<a href="http://todomvc.com">TodoMVC</a></p>
</footer> </footer>
<script src="node_modules/todomvc-common/base.js"></script> <script src="node_modules/todomvc-common/base.js"></script>
<script src="node_modules/react/dist/react-with-addons.js"></script> <script src="node_modules/react/dist/react.js"></script>
<script src="node_modules/react/dist/JSXTransformer.js"></script> <script src="node_modules/react/dist/JSXTransformer.js"></script>
<script src="node_modules/classnames/index.js"></script>
<script src="node_modules/jquery/dist/jquery.js"></script> <script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/underscore/underscore.js"></script> <script src="node_modules/underscore/underscore.js"></script>
<script src="node_modules/backbone/backbone.js"></script> <script src="node_modules/backbone/backbone.js"></script>
......
...@@ -90,17 +90,17 @@ var app = app || {}; ...@@ -90,17 +90,17 @@ var app = app || {};
return; return;
} }
var val = this.refs.newField.getDOMNode().value.trim(); var val = React.findDOMNode(this.refs.newField).value.trim();
if (val) { if (val) {
this.props.todos.create({ this.props.todos.create({
title: val, title: val,
completed: false, completed: false,
order: this.props.todos.nextOrder() order: this.props.todos.nextOrder()
}); });
this.refs.newField.getDOMNode().value = ''; React.findDOMNode(this.refs.newField).value = '';
} }
return false; event.preventDefault();
}, },
toggleAll: function (event) { toggleAll: function (event) {
...@@ -212,7 +212,7 @@ var app = app || {}; ...@@ -212,7 +212,7 @@ var app = app || {};
} }
}); });
React.renderComponent( React.render(
<TodoApp todos={app.todos} />, <TodoApp todos={app.todos} />,
document.getElementById('todoapp') document.getElementById('todoapp')
); );
......
...@@ -26,8 +26,6 @@ var app = app || {}; ...@@ -26,8 +26,6 @@ var app = app || {};
); );
} }
// React idiom for shortcutting to `classSet` since it'll be used often
var cx = React.addons.classSet;
var nowShowing = this.props.nowShowing; var nowShowing = this.props.nowShowing;
return ( return (
<footer id="footer"> <footer id="footer">
...@@ -38,7 +36,7 @@ var app = app || {}; ...@@ -38,7 +36,7 @@ var app = app || {};
<li> <li>
<a <a
href="#/" href="#/"
className={cx({selected: nowShowing === app.ALL_TODOS})}> className={classNames({selected: nowShowing === app.ALL_TODOS})}>
All All
</a> </a>
</li> </li>
...@@ -46,7 +44,7 @@ var app = app || {}; ...@@ -46,7 +44,7 @@ var app = app || {};
<li> <li>
<a <a
href="#/active" href="#/active"
className={cx({selected: nowShowing === app.ACTIVE_TODOS})}> className={classNames({selected: nowShowing === app.ACTIVE_TODOS})}>
Active Active
</a> </a>
</li> </li>
...@@ -54,7 +52,7 @@ var app = app || {}; ...@@ -54,7 +52,7 @@ var app = app || {};
<li> <li>
<a <a
href="#/completed" href="#/completed"
className={cx({selected: nowShowing === app.COMPLETED_TODOS})}> className={classNames({selected: nowShowing === app.COMPLETED_TODOS})}>
Completed Completed
</a> </a>
</li> </li>
......
...@@ -36,7 +36,7 @@ var app = app || {}; ...@@ -36,7 +36,7 @@ var app = app || {};
// immediately manipulate the DOM as if the rendering's over. Put it as a // immediately manipulate the DOM as if the rendering's over. Put it as a
// callback. Refer to app.jsx' `edit` method // callback. Refer to app.jsx' `edit` method
this.props.onEdit(function () { this.props.onEdit(function () {
var node = this.refs.editField.getDOMNode(); var node = React.findDOMNode(this.refs.editField);
node.focus(); node.focus();
node.setSelectionRange(node.value.length, node.value.length); node.setSelectionRange(node.value.length, node.value.length);
}.bind(this)); }.bind(this));
...@@ -58,7 +58,7 @@ var app = app || {}; ...@@ -58,7 +58,7 @@ var app = app || {};
render: function () { render: function () {
return ( return (
<li className={React.addons.classSet({ <li className={classNames({
completed: this.props.todo.get('completed'), completed: this.props.todo.get('completed'),
editing: this.props.editing editing: this.props.editing
})}> })}>
......
/*!
Copyright (c) 2015 Jed Watson.
Licensed under the MIT License (MIT), see
http://jedwatson.github.io/classnames
*/
(function () {
'use strict';
function classNames () {
var classes = '';
for (var i = 0; i < arguments.length; i++) {
var arg = arguments[i];
if (!arg) continue;
var argType = typeof arg;
if ('string' === argType || 'number' === argType) {
classes += ' ' + arg;
} else if (Array.isArray(arg)) {
classes += ' ' + classNames.apply(null, arg);
} else if ('object' === argType) {
for (var key in arg) {
if (arg.hasOwnProperty(key) && arg[key]) {
classes += ' ' + key;
}
}
}
}
return classes.substr(1);
}
if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {
// AMD. Register as an anonymous module.
define(function () {
return classNames;
});
} else if (typeof module !== 'undefined' && module.exports) {
module.exports = classNames;
} else {
window.classNames = classNames;
}
}());
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -114,7 +114,12 @@ ...@@ -114,7 +114,12 @@
})({}); })({});
if (location.hostname === 'todomvc.com') { if (location.hostname === 'todomvc.com') {
window._gaq = [['_setAccount','UA-31081062-1'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script')); (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 */ /* jshint ignore:end */
...@@ -228,7 +233,7 @@ ...@@ -228,7 +233,7 @@
xhr.onload = function (e) { xhr.onload = function (e) {
var parsedResponse = JSON.parse(e.target.responseText); var parsedResponse = JSON.parse(e.target.responseText);
if (parsedResponse instanceof Array) { if (parsedResponse instanceof Array) {
var count = parsedResponse.length var count = parsedResponse.length;
if (count !== 0) { if (count !== 0) {
issueLink.innerHTML = 'This app has ' + count + ' open issues'; issueLink.innerHTML = 'This app has ' + count + ' open issues';
document.getElementById('issue-count').style.display = 'inline'; document.getElementById('issue-count').style.display = 'inline';
......
...@@ -3,8 +3,9 @@ ...@@ -3,8 +3,9 @@
"dependencies": { "dependencies": {
"backbone": "^1.1.2", "backbone": "^1.1.2",
"backbone.localstorage": "^1.1.7", "backbone.localstorage": "^1.1.7",
"classnames": "^2.1.2",
"jquery": "^2.1.0", "jquery": "^2.1.0",
"react": "^0.12.0", "react": "^0.13.3",
"todomvc-app-css": "^1.0.0", "todomvc-app-css": "^1.0.0",
"todomvc-common": "^1.0.1", "todomvc-common": "^1.0.1",
"underscore": "^1.6.0" "underscore": "^1.6.0"
......
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