javascript - Backbone.js 使用 el 不起作用，但使用 $ ('selector' ) 可以。为什么？

Question

所以，我承认有人遵循我的设计和构建模式可能会很棘手。但我会尽量描述这个问题，虽然我觉得这可能比让你理解我的项目更容易 :) 但是我花了 3 天时间试图解决这个问题。

技术布局总结

我有一个全局 View (我们称之为 GV ，用于全局 View )，一切都通过这个模板。

我有导航，这可以在点击时调用 5 个单独的 View 之一。

每个 View 首先使用相同的 View (用于 defaultView 的 DV)，然后扩展该 View 并从其自己的 JST(用于 OwnView 的 OV)加载详细信息

问题在于，当点击加载 OV 时，它绑定(bind)加载的 element ( target ) 尚未呈现到页面。然而，它在 DOM 中可用，实际上用其 DV 更新 OV 但不会呈现到页面。

简要概述 - 让您了解我的 View 是如何设置的以及 的扩展内容

GV - 加载:登录、主页、全局导航

DV - 加载:此部分的导航。

DV 扩展 GV:SD.defaultView.extend

OV - 加载:h2，选项和按钮的图标

每个 OV 都扩展了 DV，这样我就可以将所有点击事件保存在一个 View 中，而不必到处粘贴代码:SD.defaultSexView.extend

问题
OV 加载到 DV 内的元素中。 GV 和 DV 都完美加载。我可以点击 login -> home -> navigation -> through ，然后加载 DV 。这就是交互中断的地方。加载的所有内容都是 JST 的 DV 中的内容

构建

只是提供一些背景信息:

我正在使用 JST 来预编译我的所有模板。

main.js 通过 require 加载我的所有依赖项。它还处理我的路线

sdFunctions.js 有全局变量和其他重要的东西。但最重要的是 2 个全局默认 View 。

1:所有事情最初都经过的 GV

2:所有选项经过的DV(主导航菜单)

概要

我知道要加载 OV，它必须具有加载到的元素可用。这是 el: 'sexdetails' 。该元素从 DV 加载。所以我意识到 DV 需要在 DOM 中才能加载 OV。否则它没有要加载的元素。

这是一个控制台负载。 page 来自 GV sexdetails 从 DV 加载，这是 OV 加载到的地方。所有这些控制台都按加载顺序排列。所以从上到下。

底部似乎可以在最后一个 console.log 中看到，它是灰色的，因为 element 已经用所有正确的信息构建了。但无论出于何种原因，它都没有输出到页面上。

JS

现在是令人兴奋的部分:p

DV - 这是第二个 defaultView，处理菜单和点击事件绑定(bind)的地方。

SD.defaultSexView = function(){
    //set up homeview
    var sexView = SD.defaultView.extend({
        el: 'page',
        jstemplate: JST['app/www/js/templates/sex/sexTemplate.ejs'],
        events:{
            "click sexoptions > *" : 'changeSex'
        },
        changeSex: function(elem){

            var me = elem.currentTarget.localName;

            $('.selected').removeClass('selected');// #update selected from bottom navigation
            $(me).addClass('selected');

            SD.pageLoad(elem); // #Call function that will re-render the page
        },
        render: function () {
            var compiled = this.jstemplate();
            this.$el.html(compiled);
        }
    });
    SD.DSV = new sexView();
    SD.DSV.render();
    return sexView;
}();

自己的 View - 5 个文件中的每一个都有一个

//set up homeview
var wank = SD.defaultSexView.extend({
    el: 'sexdetails',
    jstemplate: JST['app/www/js/templates/sex.ejs'],
    data: {
        url: SD.HTTP+'stats/add',
        sextype: 'wank',
        header: 'SOME LOUD STRING!!!',
        image: '/img/path.jpg'
    },
    render: function () {
        c($('sexdetails'));
        c(this.$el);
        var compiled = this.jstemplate(this.data);
        this.$el.html(compiled);
    }
});
return wank;

所有完整工作顺序的代码都可以在这里找到:http://m.sexdiaries.co.uk/ - 不要被 URL 拖延，我向你保证它的 SFW。一切都是用漫画完成的，而且毫不粗糙。

有趣的是，如果我更新代码以使用: $('sexdetails').html(compiled); 它确实会正确显示，但不会正确绑定(bind)任何事件。

对不起，有这么多东西要吸收，如果有人花时间阅读或理解这一点，我会非常印象深刻:)

Answer 1

我无法查看完整代码。但是根据我过去的经验，我可以说您正在渲染可能已从页面 DOM 中删除的元素的 View 。当您更新 View 的 this.$el.html() 时，它将从 DOM 中移除元素，但如果在闭包中引用，它仍会保留元素。我可以看到你正在路过

SD.pageLoad(elem)

到一些进行渲染的函数。因为 elem 是一个对象，所以它是通过引用传递的。即使您稍后更新 View 的模板

var compiled = this.jstemplate();
this.$el.html(compiled);

发送到渲染函数的元素保留在内存中，但不在 DOM 中，因此在此元素上渲染的任何元素都不会显示在页面上。此外，您在 View 中使用 $，但您应该使用 this.$。这将确保 View 中的代码永远不会更改该 View 之外的元素。