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

Question

因此，我承認，有人遵循我的設計和構建模式可能很棘手。 但是我會盡力描述這個問題，盡管我覺得這可能比讓您了解我的項目要容易:)但是我已經花了3天的時間來弄清楚這個問題。

技術布局概述

• 我有一個全局視圖（全局視圖稱為GV ），所有內容都通過此模板進行。
• 我有導航，可以在單擊時調用5個單獨的視圖之一。
• 這些視圖中的每一個都首先使用相同的視圖（ DV為defaultView），然后擴展該視圖並從其自己的JST （OV為OwnView）加載詳細信息
• 問題是，當點擊加載一個OV的element ，這勢必會加載到（ target ）尚未被渲染到頁面。 但是，它在DOM中可用，並且實際上是用OV更新DV ，但不會渲染到頁面。

簡要概述-使您了解如何設置我的視圖以及擴展了什么內容

1. GV-負載：登錄，主頁，全局導航
2. DV-負載：此部分的導航。
   • DV擴展GV： SD.defaultView.extend
3. OV-負載：h2，選項圖標和按鈕
   • 每個OV都擴展了DV，因此我可以將所有click事件保留在一個視圖中，而不必SD.defaultSexView.extend粘貼代碼： SD.defaultSexView.extend

問題

OV加載到DV內部的元素中。 GV和DV都能完美加載。 我可以單擊， login -> home -> navigation -> through它可以將其加載到DV 。 這是互動發生故障的地方。 加載的所有內容都是JST for DV內部的內容

建立

僅提供一些背景信息：

• 我正在使用JST來預編譯所有模板。
• 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顯示為灰色，因為該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); 它確實可以正確顯示，但是所有事件都不會被正確綁定。

抱歉，有這么多東西要接受，如果有人花時間閱讀或理解這一點，我會非常感動：)

Answer 1

我無法查看完整的代碼。 但是根據我過去的經驗，我可以說您正在渲染可能已從頁面DOM中刪除的元素上的視圖。 當更新視圖的this。$ el.html（）時，它將從DOM中刪除元素，但如果在閉包中引用，則仍將保留元素。 我可以看到你過去了

SD.pageLoad(elem)

進行渲染的某些功能。 由於elem是一個對象，因此它通過引用傳遞。 即使您稍后使用更新視圖的模板后

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

發送到渲染功能的元素保留在內存中，但不保留在DOM中，因此在該元素上渲染的任何元素都不會顯示在頁面上。 同樣，您在視圖中使用$，但是您應該使用this。$。 這樣可以確保視圖中的代碼永遠不會更改該視圖之外的元素。

Answer 2

看完您的代碼后，我注意到在您的“ Wank”視圖中，您正在將el設置為sexdetails ，這不會飛。 我無法深入了解其原因，但我認為這與缺乏DOM特定性有關。

將el設置為“主體內容頁面”，則允許查看而沒有任何問題，因為這允許查看直接掛鈎到頁面的主體中，並允許render函數為您完成其余工作。

希望這可以幫助！