标签：javascript backbone-js

我正在尝试构建一个包含多个列表的待办事项列表.一切都很好.当我想使用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'>&nbsp;</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'>&nbsp;</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准备好一样.这些函数没有什么特别之处,您可以随时向它们添加新的回调.所有你不必担心的是在你的回调中保持这个含义.

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'>&nbsp;</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;
}

或者,(并且可能更正确)采取措施确保在DOM准备好之前,您的骨干视图没有调用其render方法.

标签：javascript,backbone-js
来源： https://codeday.me/bug/20190620/1243588.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。