4

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

技术布局总结

  • 我有一个全局视图（让我们称之为GV全局视图），一切都通过这个模板。
  • 我有导航，这可以在点击时调用 5 个单独的视图之一。
  • 这些视图中的每一个首先使用相同的视图（DV对于 defaultView），然后扩展这个视图并从它自己的加载细节JST（OV for OwnView）
  • 问题是，当单击加载 OV 时element，它必须加载到 ( target) 中的内容尚未呈现到页面。然而，它在 中可用DOM，并且实际上DV用它更新了 ，OV但不会呈现到页面。

简要概述 - 让您了解我的视图是如何设置的以及扩展了什么

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

问题

OV加载到内部的元素中DV。GV并且DV全部加载完美。我可以单击 from，login -> home -> navigation -> through然后将其加载到DV. 这就是交互分解的地方。加载的只是JSTfor中的任何内容DV

建造

只是提供一些背景信息：

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

大纲

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

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

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

JS

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

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

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

自己的视图 - 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);它确实会正确显示，但不会正确绑定任何事件。

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

4

2 回答 2

1

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

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

希望这可以帮助！

于 2013-10-25T16:53:19.657 回答
1

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

SD.pageLoad(elem)

到一些进行渲染的功能。由于 elem 是一个对象，它是通过引用传递的。即使您稍后更新视图的模板

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

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

于 2013-10-23T05:04:32.137 回答