Skip to content

Commit 759b8b8

Browse files
committed
feat(app): add TodoItemView and TodoItem(model)
- To create element, use TodoItemView instead of jQuery DOM - not handle event yet.
1 parent 11687cd commit 759b8b8

File tree

5 files changed

+74
-16
lines changed

5 files changed

+74
-16
lines changed

index.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@
44
<meta charset="utf-8">
55
<title>Sample</title>
66
<script src="./vendor/jquery-1.11.2.min.js"></script>
7-
<script src="src/app.js"></script>
7+
<script src="node_modules/underscore/underscore-min.js"></script>
8+
<script src="node_modules/backbone/backbone-min.js"></script>
9+
<script src="lib/bundle.js"></script>
810
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
911
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
1012
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans">

package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
"watchify": "^2.2.1"
3636
},
3737
"dependencies": {
38-
"backbone": "^1.1.2"
38+
"backbone": "^1.1.2",
39+
"underscore": "^1.7.0"
3940
}
4041
}

src/app.js

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,30 @@
1+
import TodoItemView from "./todo-item-view.js"
2+
import TodoItem from "./todo-item-model.js"
13
$(function () {
24
var $form = $('.todoForm');
35
var $list = $('.todoList');
46

57

68
function createTodoItem(text) {
7-
var $li = $('<li>');
8-
var $text = $('<span>').addClass('todoText').text(text);
9-
var $checkbox = $('<input type="checkbox">');
10-
var $remove = $('<i>').addClass('removeBtn fa fa-times');
11-
$remove.on('click', function () {
12-
if (!window.confirm('消しますよ')) {
13-
return;
14-
}
15-
$li.remove();
9+
var model = new TodoItem({
10+
title: text
1611
});
17-
$checkbox.on('click', function () {
18-
$li.toggleClass('is-complete');
19-
});
20-
$li.append($checkbox, $text, $remove);
21-
return $li;
12+
var item = new TodoItemView({model});
13+
//var $li = $('<li>');
14+
//var $text = $('<span>').addClass('todoText').text(text);
15+
//var $checkbox = $('<input type="checkbox">');
16+
//var $remove = $('<i>').addClass('removeBtn fa fa-times');
17+
//$remove.on('click', function () {
18+
// if (!window.confirm('消しますよ')) {
19+
// return;
20+
// }
21+
// $li.remove();
22+
//});
23+
//$checkbox.on('click', function () {
24+
// $li.toggleClass('is-complete');
25+
//});
26+
//$li.append($checkbox, $text, $remove);
27+
return item.render().el;
2228
}
2329

2430
$form.on('submit', function (e) {

src/todo-item-model.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
// LICENSE : MIT
2+
"use strict";
3+
var {Model} = Backbone;
4+
class TodoItem extends Model {
5+
defaults() {
6+
return {
7+
title: '',
8+
completed: false
9+
};
10+
}
11+
}
12+
export default TodoItem;

src/todo-item-view.js

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
// LICENSE : MIT
2+
"use strict";
3+
var {View} = Backbone;
4+
class TodoItemView extends View {
5+
constructor(options) {
6+
// *... is a list tag.*
7+
this.tagName = 'li';
8+
// *Cache the template function for a single item.*
9+
this.template = _.template(`
10+
<input type="checkbox">
11+
<span class="todoText"><%- title %></span>
12+
<i class="removeBtn fa fa-times"></i>
13+
`);
14+
this.input = '';
15+
// *Define the DOM events specific to an item.*
16+
this.events = {
17+
'click input': 'toggleComplete',
18+
'click .removeBtn': 'removeItem'
19+
};
20+
super(options);
21+
}
22+
23+
// *Re-render the contents of the todo item.*
24+
render() {
25+
this.$el.html(this.template(this.model.toJSON()));
26+
this.$el.toggleClass('completed', this.model.get('completed'));
27+
return this;
28+
}
29+
30+
toggleComplete() {
31+
32+
}
33+
34+
removeItem() {
35+
}
36+
}
37+
export default TodoItemView;

0 commit comments

Comments
 (0)