我已经为待办事项列表编写了一个代码,但它的工作正常,但有时会出错 Backbone / underscore js“太多的递归”和“Inspect target crashed”错误就像这样是控制台..
Html代码: -
<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>
Backbone JS代码: -
(function ($) {
'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")
});
// 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' : 'OnEnter',
'blur .edit' : 'close',
'click .toggle': 'toggleCompleted',
'click .destroy': 'destroy'
},
edit: function(){
this.$el.addClass('editing');
this.input.focus();
},
OnEnter: function(e){
if(e.which == 13){
this.close();
}
},
close: function(){
var value = this.input.val().trim();
if(value) {
this.model.save({title: value});
}
this.$el.removeClass('editing');
},
updateOnEnter: function(e){
console.log(this);
console.log(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
app.todoList.each(this.addOne, this);
},
newAttributes: function(){
return {
title: this.input.val().trim(),
completed: false
}
}
});
//--------------
// Initializers
//--------------
app.appView = new app.AppView();
})(jQuery);
当我实现和OnEnter同时按下编辑它给我这个错误.. 我检查了“太多的递归”错误来了..但是无法弄清楚..
请不要介意我的问题不清楚......
谢谢!
答案 0 :(得分:4)
可能你应该试试这个。 我已经给了一个条件进入,但我的电话反复进行, 所以我宣布按键事件和功能如下
events:{
"keyup #globalOrgSearchInput":"onEnter"
}
onEnter:function(event){
var me=this;`enter code here`
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '13'){
me.globalOrgSearch();
}
},