1
Dies ist ein Backbone-Tutorial. Hier ist der Code:Was ist die "ohne" -Funktion bei einer Sammlung?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>To-do App in Backbone.js</title>
<!-- ========= -->
<!-- CSS -->
<!-- ========= -->
<style type="text/css">
#todoapp ul {
list-style-type: none; /* Hides bullet points from todo list */
}
#todo-list input.edit {
display: none; /* Hides input box*/
}
#todo-list .editing label {
display: none; /* Hides label text when .editing*/
}
#todo-list .editing input.edit {
display: inline; /* Shows input text box when .editing*/
}
</style>
</head>
<body>
<!-- ========= -->
<!-- Your HTML -->
<!-- ========= -->
<section id="todoapp">
<header id="header">
<h1>Todos</h1>
<input id="new-todo" placeholder="What needs to be done?" autofocus>
<div>
<a href="#/">show all</a> |
<a href="#/pending">show pending</a> |
<a href="#/completed">show completed</a>
</div>
</header>
<section id="main">
<ul id="todo-list"></ul>
</section>
</section>
<div>
<p>Find the tutorial and code in <a href="http://adrianmejia.com/blog/2012/09/11/backbone-dot-js-for-absolute-beginners-getting-started/">here</a></p>
</div>
<!-- Templates -->
<script type="text/template" id="item-template">
<div class="view">
<input class="toggle" type="checkbox" <%= completed ? 'checked' : '' %>>
<label><%- title %></label>
<input class="edit" value="<%- title %>">
<button class="destroy">remove</button>
</div>
</script>
<!-- ========= -->
<!-- Libraries -->
<!-- ========= -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.0/backbone.localStorage-min.js" type="text/javascript"></script>
<!-- =============== -->
<!-- Javascript code -->
<!-- =============== -->
<script type="text/javascript">
'use strict';
var app = {}; // create namespace for our app
//--------------
// Models
//--------------
app.Todo = Backbone.Model.extend({
defaults: {
title: '',
completed: false
},
toggle: function(){
this.save({ completed: !this.get('completed')});
}
});
//--------------
// Collections
//--------------
app.TodoList = Backbone.Collection.extend({
model: app.Todo,
localStorage: new Store("backbone-todo"),
completed: function() {
return this.filter(function(todo) {
return todo.get('completed');
});
},
remaining: function() {
debugger;
return this.without.apply(this, this.completed());
}
});
// instance of the Collection
app.todoList = new app.TodoList();
//--------------
// Views
//--------------
// renders individual todo items list (li)
app.TodoView = Backbone.View.extend({
tagName: 'li',
template: _.template($('#item-template').html()),
render: function(){
this.$el.html(this.template(this.model.toJSON()));
this.input = this.$('.edit');
return this; // enable chained calls
},
initialize: function(){
this.model.on('change', this.render, this);
this.model.on('destroy', this.remove, this); // remove: Convenience Backbone's function for removing the view from the DOM.
},
events: {
'dblclick label' : 'edit',
'keypress .edit' : 'updateOnEnter',
'blur .edit' : 'close',
'click .toggle': 'toggleCompleted',
'click .destroy': 'destroy'
},
edit: function(){
this.$el.addClass('editing');
this.input.focus();
},
close: function(){
var value = this.input.val().trim();
if(value) {
this.model.save({title: value});
}
this.$el.removeClass('editing');
},
updateOnEnter: function(e){
if(e.which == 13){
this.close();
}
},
toggleCompleted: function(){
this.model.toggle();
},
destroy: function(){
this.model.destroy();
}
});
// renders the full list of todo items calling TodoView for each one.
app.AppView = Backbone.View.extend({
el: '#todoapp',
initialize: function() {
this.input = this.$('#new-todo');
app.todoList.on('add', this.addAll, this);
app.todoList.on('reset', this.addAll, this);
app.todoList.fetch(); // Loads list from local storage
},
events: {
'keypress #new-todo': 'createTodoOnEnter'
},
createTodoOnEnter: function(e){
if (e.which !== 13 || !this.input.val().trim()) { // ENTER_KEY = 13
return;
}
app.todoList.create(this.newAttributes());
this.input.val(''); // clean input box
},
addOne: function(todo){
var view = new app.TodoView({model: todo});
$('#todo-list').append(view.render().el);
},
addAll: function(){
this.$('#todo-list').html(''); // clean the todo list
// filter todo item list
switch(window.filter){
case 'pending':
_.each(app.todoList.remaining(), this.addOne);
break;
case 'completed':
_.each(app.todoList.completed(), this.addOne);
break;
default:
app.todoList.each(this.addOne, this);
break;
}
},
newAttributes: function(){
return {
title: this.input.val().trim(),
completed: false
}
}
});
//--------------
// Routers
//--------------
app.Router = Backbone.Router.extend({
routes: {
'*filter' : 'setFilter'
},
setFilter: function(params) {
console.log('app.router.params = ' + params);
window.filter = params.trim() || '';
app.todoList.trigger('reset');
}
});
//--------------
// Initializers
//--------------
app.router = new app.Router();
Backbone.history.start();
app.appView = new app.AppView();
</script>
</body>
</html>
Was diese Linie zu tun ist:
remaining: function() {
return this.without.apply(this, this.completed());
}
Was ist, das zu tun?
without ist von Unterstrich, aber was ist apply aus? Außerdem habe ich einen Debugger über diese Zeile innerhalb der anonymen Funktion gesetzt und das war ein Fehler:
Warum hat das nicht funktioniert? Was ist apply?
der Hauptgrund ist hier gelten die 'without' Methode mit einzelnen Argumente zu nennen ? Ist der 'this' Kontext redundant? – Jwan622
@ Jwan622 Ja, das ist genau der Zweck von 'apply'. Sie werden oft Tricks sehen, die 'apply' verwenden, um ein Array als Argumente von Funktionen zu verwenden. 'this' sieht überflüssig aus, aber' apply' überschreibt den Kontext. Wenn Sie also 'null' als Kontext übergeben, wäre' this' nicht die Auflistung. –