Backbone.js的DOM是不是准备渲染方法来应用jQuery的魔法 [英] Backbone.js DOM isn't ready in render method to apply jquery magic

查看：86
本文介绍了Backbone.js的DOM是不是准备渲染方法来应用jQuery的魔法的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图建立与多个列表待办事项列表。一切工作完全正常。问题是当我想要使用jQuery UI排序。
我添加的片段在我TaskListView在渲染功能，但我不得不这样它等待，直到DOM被加载到它包装成一个setTimeout函数。

我是pretty肯定有一个更好的方式来做到这一点，但我找不到它。帮助是AP preciated。

  VAR TaskView = Backbone.View.extend（{
    初始化：功能（任务）{
        this.task =任务;
    }，
    渲染：功能（）{
        VAR completedClass =completedTask;
        如果（this.task.completed == 100）completedClass =pendingTask;
        变种的html =
        +＆LT;李类='任务为＆LT;％= task.get（'ID'）％GT;'数据-ID ='＆LT;％= task.get（'ID'）％GT;'排序=真＆gt;中
        +＆LT; D​​IV CLASS ='浮动左'＆GT;＆LT; I类='图标垃圾removeTask数据-ID ='＆LT;％= task.get（'ID'）％＆GT;'＆GT;＆LT; / I＆GT;＆LT; / DIV＆gt;中
        +＆LT; D​​IV CLASS ='浮动左'＆gt;中
        +＆LT;跨度类='editTask数据类型='标题'数据-ID ='＆LT;％= task.get（'ID'）％＆GT;'＆GT;＆LT;％= task.get（称号'）％GT;＆下; /跨度＆gt;中
        +＆LT; / DIV＆gt;中
        +＆LT; D​​IV CLASS ='飘右'＆gt;中
        +＆LT;跨度类='editTask任务负责标签数据类型='负责任'的数据ID ='＆LT;％= task.get（'ID'）％＆GT;'＆GT;＆LT;％=任务。得到（'负责'）％GT;＆LT; / SPAN＆gt;中
        +＆LT;跨度类='editTask任务的截止日期标签数据类型='结束'数据-ID ='＆LT;％= task.get（'ID'）％＆GT;'＆GT;＆LT;％=任务。得到（'结束'）％GT;＆LT; / SPAN＆gt;中
        +＆LT;跨度类=标签criticallyLevelToggle editTask＆LT;％= criticallyLevelClass％GT;'数据类型='完成'的数据ID ='＆LT;％= task.get（'ID'）％＆GT;'＆GT;＆LT;％= parseInt函数（task.get（'完成'））％＆GT;％LT /跨度＆gt;中
        +＆LT; / DIV＆gt;中
        +＆LT; D​​IV CLASS ='清晰'＆GT;＆安培; NBSP;＆LT; / DIV＆gt;中
        +＆LT; /李＆gt;中;        VAR模板= _.template（HTML，{任务：this.task，criticallyLevelClass：this.task.getCriticallyLevelClass（）完成：completedClass}）;
        这$ el.html（模板）;
        返回此;
    }
}）;VAR TaskListView = Backbone.View.extend（{
    初始化：功能（任务）{
        this.tasks =任务;
    }，
    渲染：功能（）{
        变种的html =
        +＆LT; UL类='任务'＆gt;中
        +＆下;％= tasksli％gt;中
        +＆LT;李＆GT;＆LT; D​​IV CLASS ='浮动左'＆GT;＆LT;输入类型=文本占位符='新任务......阶级=新任务NAME =新任务/ ＆GT;＆LT; / DIV＆GT;＆LT; D​​IV CLASS ='清晰'＆GT;＆安培; NBSP;＆LT; / DIV＆GT;＆LT; /李＆gt;中
        +＆下; / UL＆gt;中;
        +;
        变种tasksRendered =;
        如果（_.isArray（this.tasks））{
            对于（VAR I = 0; I＆LT; this.tasks.length;我++）{
                VAR tView =新TaskView（新建任务（this.tasks [I]））;
                tasksRendered + = tView.render（）el.innerHTML。
            };
        }
        VAR模板= _.template（HTML，{tasksli：tasksRendered}）;
        这$ el.html（模板）;        的setTimeout（函数（）{这一点。$（'任务'）。排序（{
            停止：功能（E，UI）{
                ui.item.trigger（'降'，ui.item.index（））;
            }
        }）;}，500）;        返回此;
    }
}）;


解决方案

而不是的setTimeout ，只需要使用 $（函数（）{}） （或 $（文件）。就绪），因为你通常会等待DOM做好准备。没有什么特别的这些功能​​，你可以在任何时候给他们增加新的回调。你所担心的是保持在回调的意思这个。

 渲染：功能（）{
    变种的html =
    +＆LT; UL类='任务'＆gt;中
    +＆下;％= tasksli％gt;中
    +＆LT;李＆GT;＆LT; D​​IV CLASS ='浮动左'＆GT;＆LT;输入类型=文本占位符='新任务......阶级=新任务NAME =新任务/ ＆GT;＆LT; / DIV＆GT;＆LT; D​​IV CLASS ='清晰'＆GT;＆安培; NBSP;＆LT; / DIV＆GT;＆LT; /李＆gt;中
    +＆下; / UL＆gt;中;
    +;
    变种tasksRendered =;
    如果（_.isArray（this.tasks））{
        对于（VAR I = 0; I＆LT; this.tasks.length;我++）{
            VAR tView =新TaskView（新建任务（this.tasks [I]））;
            tasksRendered + = tView.render（）el.innerHTML。
        };
    }
    VAR模板= _.template（HTML，{tasksli：tasksRendered}）;
    这$ el.html（模板）;
    VAR自我=这一点;    $（函数（）{
        自$（'任务'）。排序（{
        停止：功能（E，UI）{
            ui.item.trigger（'降'，ui.item.index（））;
        }
    }）    返回此;
}

另外，（可能更正确）采取措施，以确保您的骨干观点是不是有所谓的渲染方法，直到DOM已准备就绪。

I'm trying to build a todo list with multiple lists. Everything works perfectly fine. The issue comes when I want to use JQuery UI Sortable. I'm adding the snippet in my TaskListView in the render function, but I had to wrap it into a setTimeout function so that it waits until the DOM is loaded.

I'm pretty sure there is a better way to do this, but I just couldn't find it yet. Help is appreciated.

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;
    }
});

解决方案

Instead of setTimeout, just use $(function () { }) (or $(document).ready) as you would normally to wait for the DOM to be ready. There is nothing special about these functions, and you can add new callbacks to them at any point. All you have to worry about is maintaining the meaning of this in your callback.

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;
}

Alternatively, (and probably more correctly) take steps to make sure that your backbone view isn't having its render method called until the DOM is ready.

这篇关于Backbone.js的DOM是不是准备渲染方法来应用jQuery的魔法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆