Browse Source

Level 1, basic notions. Plus Course slides.

Frederic G. MARAND 6 years ago
parent
commit
b423c5ac04
4 changed files with 40 additions and 1 deletions
  1. 11 0
      .eslintrc.yml
  2. BIN
      The_Anatomy_of_BackboneJS.pdf
  3. 2 0
      index.html
  4. 27 1
      todos.js

+ 11 - 0
.eslintrc.yml

@@ -0,0 +1,11 @@
+env:
+  browser: true
+  node: true
+globals:
+  Backbone: false
+parserOptions:
+  ecmaFeatures:
+    impliedStrict: true
+    jsx: false
+  ecmaVersion: 6
+  sourceType: script # or "module"

BIN
The_Anatomy_of_BackboneJS.pdf


+ 2 - 0
index.html

@@ -6,6 +6,8 @@
   </head>
   <body>
 
+    <div id="app"></div>
+
     <script src="node_modules/jquery/dist/jquery.slim.js"></script>
     <script src="node_modules/lodash/lodash.js"></script>
     <script src="node_modules/backbone/backbone.js"></script>

+ 27 - 1
todos.js

@@ -1,4 +1,30 @@
 $(function () {
-  console.log('ready');
+  // Create a model class.
+  const TodoItem = Backbone.Model.extend({});
+  // Create a model instance.
+  const todoItem = new TodoItem({
+    description: "Remember the milk",
+    status: "incomplete",
+    id: 1,
+  });
+
+  // Manipulate attributes.
+  const description = todoItem.get('description');
+  todoItem.set('status', 'complete');
+
+  // Save to the server: needs some configuration.
+  // todoItem.save();
+
+  // Create a view class.
+  const TodoView = Backbone.View.extend({
+    render: function () {
+      const html = '<h3>' + this.model.get('description') + '</h3>';
+      $(this.el).html(html);
+    },
+  });
+  // Create a view instance.
+  const todoView = new TodoView({ model: todoItem });
+  todoView.render();
+  $('#app').html(todoView.el);
 });