BackboneJS

Тест1

by ZondArt

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<h2>Список задач:</h2>
<form action="" id="addTask">
    <input type="text" placeholder="Добавить задачу"> 
    Приоритет: <input name='number' type='number' min="0" max="10" step="1" value='10' />
    <input type="submit">
</form>
<div class="tasks"></div>
<script type="text/template" id="task-id">
    <strong><%= title %></strong> - Priority: <%= priority %> <button class="edit">Редактировать</button>  <button class="delete">Удалить</button>
</script>

JavaScript

(function () {
	
	window.App = {
		Views: {},
		Models: {},
		Collections: {},
		Router: {}
	};

	App.Router = Backbone.Router.extend({
		routes: {
			"" : "index",
			"test" : "test"
		},

		index: function () {
			console.log("Индексная страница");
		},

		test: function () {
			$("body").html("<strong>Это тестовая страница</strong>");
		}
	});

	new App.Router();
	Backbone.history.start();

	window.template = function(id){
		return _.template( $("#" + id).html() );
	};

	App.Models.Task = Backbone.Model.extend({
		defaults: {
			"priority": 1
		}
	});

	App.Collections.Task = Backbone.Collection.extend({
		model     : App.Models.Task,
		comparator: function(model) {
			return model.get("priority");
		}
	});

	App.Views.Tasks = Backbone.View.extend({
		tagName: "ul",

        initialize: function() {
          	this.collection.on('add', this.render, this );
          	
        },

		render: function () {
			this.$el.children().remove();
			this.collection.each(this.addOne, this);
			return this;
		},

		addOne: function(obj) {
			var taskView = new App.Views.Task({model: obj});
			this.$el.append( taskView.render().el );
		}
	}); 

	App.Views.AddTask = Backbone.View.extend({
		el: "#addTask",

		events: {
			"submit" : "submit",
		},

		submit: function (e) {
			e.preventDefault();
			var newTaskTitle = $(e.currentTarget).find("input[type=text]").val();
			var newTaskPriority = +$(e.currentTarget).find("input[type=number]").val();
			var newTask = new App.Models.Task( {title: newTaskTitle, priority: newTaskPriority} );
			this.collection.add(newTask);
		},

	});

	App.Views.Task = Backbone.View.extend({

		initialize: function(){
			this.model.on("change", this.render, this);
			this.model.on("destroy", this.removeEl, this);
		},

		tagName: "li",
		template: template("task-id"),

		events: {
			"click .edit" : "editTask",
			"click .delete" : "destroyModel"
		},

		editTask: function() {
			var newTask = prompt("Введите новое задание",...