我正在尝试构建一个包含多个列表的待办事项列表。一切正常。当我想使用 JQuery UI Sortable 时,问题就来了。 我在 TaskListView 的渲染函数中添加了代码片段,但我必须将其包装到 setTimeout 函数中,以便它等待 DOM 加载完毕。
我很确定有更好的方法可以做到这一点,但我还没有找到。感谢您的帮助。
var TaskView = Backbone.View.extend({
initialize: function(task) {
this.task = task;
},
render: function() {
var completedClass = "completedTask";
if (this.task.completed == 100) completedClass = "pendingTask";
var html = ""
+ "<li class='task-<%= task.get('id') %> ' data-id='<%= task.get('id') %>' sortable='true'>"
+ "<div class='float-left'><i class='icon-trash removeTask' data-id='<%= task.get('id') %>'></i></div>"
+ "<div class='float-left'>"
+ "<span class='editTask ' data-type='title' data-id='<%= task.get('id') %>'><%= task.get('title') %></span> "
+ "</div>"
+ "<div class='float-right'>"
+ "<span class='editTask task-responsible label' data-type='responsible' data-id='<%= task.get('id') %>'><%= task.get('responsible') %></span>"
+ "<span class='editTask task-deadline label' data-type='ended' data-id='<%= task.get('id') %>'><%= task.get('ended') %></span>"
+ "<span class='label criticallyLevelToggle editTask <%= criticallyLevelClass %>' data-type='completed' data-id='<%= task.get('id') %>'><%= parseInt(task.get('completed')) %>%</span>"
+ "</div>"
+ "<div class='clear'> </div>"
+"</li>";
var template = _.template( html, {task: this.task, criticallyLevelClass:this.task.getCriticallyLevelClass(), completed: completedClass});
this.$el.html(template);
return this;
}
});
var TaskListView = Backbone.View.extend({
initialize: function(tasks) {
this.tasks = tasks;
},
render: function() {
var html = ""
+"<ul class='tasks'>"
+"<%= tasksli %>"
+"<li><div class='float-left'><input type='text' placeholder='New task...' class='new-task' name='new-task'/></div><div class='clear'> </div></li>"
+"</ul>";
+ "";
var tasksRendered = "";
if (_.isArray(this.tasks)) {
for (var i = 0; i < this.tasks.length; i++) {
var tView = new TaskView(new Task(this.tasks[i]));
tasksRendered += tView.render().el.innerHTML;
};
}
var template = _.template(html, { tasksli: tasksRendered});
this.$el.html(template);
setTimeout(function(){this.$('.tasks').sortable({
stop: function(e, ui) {
ui.item.trigger('drop', ui.item.index());
}
});}, 500);
return this;
}
});
最佳答案
不用setTimeout
,只需使用$(function () { })
(或$(document).ready
)通常等待 DOM 准备就绪。这些函数没有什么特别之处,您可以随时向它们添加新的回调。您只需担心在回调中维护 this
的含义。
render: function() {
var html = ""
+"<ul class='tasks'>"
+"<%= tasksli %>"
+"<li><div class='float-left'><input type='text' placeholder='New task...' class='new-task' name='new-task'/></div><div class='clear'> </div></li>"
+"</ul>";
+ "";
var tasksRendered = "";
if (_.isArray(this.tasks)) {
for (var i = 0; i < this.tasks.length; i++) {
var tView = new TaskView(new Task(this.tasks[i]));
tasksRendered += tView.render().el.innerHTML;
};
}
var template = _.template(html, { tasksli: tasksRendered});
this.$el.html(template);
var self = this;
$(function(){
self.$('.tasks').sortable({
stop: function(e, ui) {
ui.item.trigger('drop', ui.item.index());
}
})
return this;
}
或者,(可能更正确)采取措施确保您的主干 View 在 DOM 准备就绪之前不会调用其 render
方法。
关于javascript - Backbone.js DOM 尚未在渲染方法中准备好应用 jquery 魔法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17087618/