m-r-r/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JS Bin</title>
    <script src='http://cdn.ractivejs.org/latest/ractive.js'></script>
    <script src='http://cdn.jsdelivr.net/ractive.adaptors-backbone/latest/ractive-adaptors-backbone.min.js'></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
    <script id="app-template" type="text/ractive">
      <header id="header">
  	    <h1>todos</h1>
  	    <input id="new-todo" on-enter="newTodo" placeholder="What needs to be done?" autofocus>
      </header>
      <section>
      </section>
      <footer id="footer">
      </footer>
    </script>
    <script id="task-template" type="text/ractive">
      <article class="task">
        <h1 class="task__title">{{ title }}</h1>
        {{#description}}
        <p class="task__description">{{description}}</p>
        {{^description}}
        <p class="task__description task__description--empty">
          Cliquez ici pour ajouter une description.
        </p>
        {{/description}}

        {{#each children:task}}
          <Task this={{task}} />
        {{/each}}
      </article>
    </script>
  </head>
  <body>
   <div id="main">
   </div>
   <script>
     var app = new AppView();
     app.render('#main');
   </script>
  </body>
</html>

## model.js
var Task = Backbone.Model.extend({
  defaults: {
    title: '',
    completed: false,
    parent: null
  },

  // Toggle the `completed` state of this todo item.
  toggle: function () {
    this.save({
      completed: !this.get('completed')
    });
  },

  children: function () {

  }
});


var TaskList = Backbone.Collection.extend({
	// Reference to this collection's model.
	model: Task,

	// Save all of the todo items under the `"todos"` namespace.
	localStorage: new Backbone.LocalStorage('task-backbone'),

	// Filter down the list of all todo items that are finished.
	completed: function (parent) {
		return this.where({completed: true, parent: parent});
	},


	remaining: function (parent) {
		return this.where({completed: false, parent: parent});
	},

	nextOrder: function () {
		return this.length ? this.last().get('order') + 1 : 1;
	},

	// Todos are sorted by their original insertion order.
	comparator: 'order'
});

## view.js
var TaskView = Ractive.extend({
  template: 'task-template',
  components: {Task: TaskView}
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>JS Bin</title>
	<script src='http://cdn.ractivejs.org/latest/ractive.js'></script>
	<script src='http://cdn.jsdelivr.net/ractive.adaptors-backbone/latest/ractive-adaptors-backbone.min.js'></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
	<script id="app-template" type="text/ractive">
	<header id="header">
	<h1>todos</h1>
	<input id="new-todo" on-enter="newTodo" placeholder="What needs to be done?" autofocus>
	</header>
	<section>
	</section>
	<footer id="footer">
	</footer>
	</script>
	<script id="task-template" type="text/ractive">
	<article class="task">
	<h1 class="task__title">{{ title }}</h1>
	{{#description}}
	<p class="task__description">{{description}}</p>
	{{^description}}
	<p class="task__description task__description--empty">
	Cliquez ici pour ajouter une description.
	</p>
	{{/description}}

	{{#each children:task}}
	<Task this={{task}} />
	{{/each}}
	</article>
	</script>
	</head>
	<body>
	<div id="main">
	</div>
	<script>
	var app = new AppView();
	app.render('#main');
	</script>
	</body>
	</html>
	var Task = Backbone.Model.extend({
	defaults: {
	title: '',
	completed: false,
	parent: null
	},

	// Toggle the `completed` state of this todo item.
	toggle: function () {
	this.save({
	completed: !this.get('completed')
	});
	},

	children: function () {

	}
	});


	var TaskList = Backbone.Collection.extend({
	// Reference to this collection's model.
	model: Task,

	// Save all of the todo items under the `"todos"` namespace.
	localStorage: new Backbone.LocalStorage('task-backbone'),

	// Filter down the list of all todo items that are finished.
	completed: function (parent) {
	return this.where({completed: true, parent: parent});
	},


	remaining: function (parent) {
	return this.where({completed: false, parent: parent});
	},

	nextOrder: function () {
	return this.length ? this.last().get('order') + 1 : 1;
	},

	// Todos are sorted by their original insertion order.
	comparator: 'order'
	});
	var TaskView = Ractive.extend({
	template: 'task-template',
	components: {Task: TaskView}
	});