Question

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

技术布局总结

我有一个全局视图（让我们调用此GV，对于全局视图），所有内容都通过此模板。
我有导航，这可以在点击时调用5个单独的视图之一。
每个视图首先使用相同的视图（默认视图为DV），然后扩展此视图并从其自己的JST（OV for OwnView）加载详细信息
问题在于，当点击加载OV时，绑定到{（{1}}）的element尚未呈现到页面。但它在target中可用，实际上使用DOM更新了DV，但未向页面呈现。

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

GV - 加载：登录，主页，全局导航
DV - 加载：此部分的导航。
- DV扩展GV：OV
OV - 加载：h2，选项和按钮的图标
- 每个OV扩展DV，以便我可以将所有点击事件保存在一个视图中，而不必全部粘贴代码：SD.defaultView.extend

问题

SD.defaultSexView.extend加载到OV内的元素。 DV和GV完全加载。我可以点击DV然后加载login -> home -> navigation -> through。这是互动失败的地方。所有加载的内容都是DV

JST

构建

只是提供一些背景信息：

我正在使用DV来预编译我的所有模板。
JST通过require加载我的所有依赖项。它还处理我的路线
main.js有全局和其他重要的东西。但最重要的是2个全局默认视图。
- 1：最初通过的sdFunctions.js
- 2：所有选项都经过的GV（主导航菜单）

概要

我知道要加载DV，必须将其加载的元素设置为可用。这是OV。此元素从el: 'sexdetails'加载。所以我意识到DV需要在DOM中加载DV。否则它没有要加载的元素。 enter image description here

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

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

JS

现在令人兴奋的部分：p

DV - 这是第二个defaultView，用于处理菜单以及点击事件绑定的位置。

element

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

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

完整的工作顺序中的所有代码都可以在这里找到：http://m.sexdiaries.co.uk/ - 不要被URL推迟，我向你保证它的SFW。一切都是用卡通完成的，没有原油。

有趣的是，如果我更新要使用的代码：//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;它确实会正确显示，但没有一个事件会被正确绑定。

对不起有太多可以接受的内容，如果有人花时间阅读或了解这一点，我会非常感动：）

Answer 1

我无法查看完整的代码。但是根据我过去的经验，我可以说你正在渲染一个可能已从页面DOM中删除的元素的视图。当您更新视图的$ el.html（）时，它将从DOM中删除元素，但如果在闭包中引用则仍保留元素。我可以看到你正在传递

SD.pageLoad(elem)

到一些渲染的函数。由于elem是一个对象，它通过引用传递。即使您稍后使用

更新视图的模板

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

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

Answer 2

在查看了您的代码之后，我注意到在您的“手淫”视图中，您将el设置为sexdetails，但不会飞。我无法深入研究为什么会这样，但我认为它与缺乏DOM特异性有关。

将el设置为“正文内容页面”然而，允许查看呈现而没有任何问题，因为这允许查看直接挂钩到页面正文并让render函数执行其余的工作适合你。

希望这有帮助！

Backbone.js使用el不起作用，但使用$（'selector'）。为什么？

2 个答案: