|
10.06.2015, 23:56
#38981723
Ссылка:
Ссылка на сообщение:
Ссылка с названием темы:
Ссылка на профиль пользователя:
|
|
|
Участник
Сообщения: 17
Рейтинг:
0
/ 0
|
|
|
|
Изучаю backbone, на начальной стадии. Не получается, или, не знаю как сделать, при изменении элемента в select, например было 4 ставлю 2, в модели изменения есть, а как сделать, чтобы при обновлении view модели для поля приоритет: показывало выбранное значение. Думаю правильней было использовать binding. Буду рад любой подсказке или ссылке.
Исходный код примера
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<title>tasks in backbone</title>
<style>
h1 {
color: gray;
}
ul {
background-color: lightgray;
}
li:nth-child(even) {
color: red;
background-color: lightgray;
}
li:nth-child(odd) {
color: green;
background-color: lightgray;
}
button {
margin:4px;
}
option {
min-width: 15px;
}
</style>
</head>
<body>
<h1>Список задач</h1>
<script id="task-template" type="text/template">
<strong>Задача: </strong>
<span><input type="text" class="title<%= id %>" value="<%= title %>" /></span>
<em>Приоритет: </em>
<select class="priority<%= id %>">
<% for(var i=priority.min;i<=priority.max;i++) { %>
<% if(i===priority.value) { %>
<option value=<%= i %> selected=true><%= i %></option>
<% } else { %>
<option value=<%= i %>><%= i %></option>
<% } %>
<% } %>
</select>
<button class="save-task" value="<%= id %>">Сохранить</button>
<button class="delete-task" value="<%= id %>">Удалить</button>
</script>
<div id="tasks"></div>
<button id="add-task">Добавить</button>
<script src="http://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.1/backbone-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
// пространство имён
window.App = {
Models: {},
Collections: {},
Views: {}
};
// шаблон
window.template = function(id) {
return _.template($('#' + id).html());
};
App.Models.Task = Backbone.Model.extend({
});
App.Views.Task = Backbone.View.extend({
tagName: 'li',
template: template('task-template'),
render: function() {
var template = this.template( this.model.toJSON() );
this.$el.html( template );
return this;
},
events: {
"click .save-task": "savetask"
},
savetask: function () {
var obj = {}, nobj = {};
obj.id = this.model.get('id');
obj.title = this.model.get('title');
obj.priority = this.model.get('priority').value;
nobj.title = $('.title'+obj.id).val();
nobj.priority = $('.priority'+obj.id + ' option:selected').val();
if(confirm('Сохранить новые значения?')) {
this.model.set('title', nobj.title);
var array = _.clone(this.model.get('priority'));
array['value'] = nobj.priority;
this.model.set('priority', array);
}
this.render();
return this;
}
});
App.Collections.Task = Backbone.Collection.extend({
model: App.Models.Task
});
App.Views.Task.collection = Backbone.View.extend({
tagName: 'ul',
render: function() {
this.model.each(function(task){
var taskView = new App.Views.Task({model: task});
this.$el.append(taskView.render().el);
}, this );
}
});
tasks = new App.Collections.Task([
{
id: 1,
title: "Задача1",
priority: { value:4, min:1, max:10 }
},
{
id: 3,
title: "Задача3",
priority: { value:3, min:1, max:5 }
},
{
id: 22,
title: "Задача22",
priority: { value:6, min:1, max:7 }
}
]);
App.view = new App.Views.Task.collection({model: tasks});
App.view.render();
$('#tasks').append(App.view.$el);
});
</script>
</body>
</html>
|
|
|
