jQuery選項卡在主幹視圖

我無法獲得jquery選項卡來正確呈現和交互。以下是相關的代碼片段;有沒有看到有什麼可能是錯的？jQuery選項卡在主幹視圖

正如你將在下面看到的，在我的骨幹視圖中，我將一個（jquery選項卡）模板添加到div（視圖的el），然後渲染該div。

模板：

<div id="tab-set"> 
    <ul> 
     <li><a href="#panel1">Details</a></li> 
     <li><a href="#panel2">Images</a></li> 
     <li><a href="#panel3">Appendix</a></li> 
    </ul> 
    <div id="panel1">...</div> 
    <div id="panel2">...</div> 
    <div id="panel3">...</div> 
</div>

骨幹查看

App.Views.IndexView = Backbone.View.extend({ 

    tagName: 'div', 

    id: 'user-content', 

    template: JST['users/index'], 

    ... 

    render: function(){ 
     var view = this; 

     $(this.el).html(this.template({user: this.model})); 
     this.$('#date').datepicker(); 
     this.$('#tab-set').tabs(); 

     return this; 
    } 
});

來源

2012-02-06 Dan

在瀏覽器的控制檯中是否有任何錯誤？ – 2012-02-06 14:56:23

你是什麼意思：「我無法讓jQuery選項卡正確呈現和交互」。你有錯誤嗎？你有什麼期望，你有什麼？ – 2012-02-06 15:06:55

@GrahamClark：不，我的瀏覽器的控制檯沒有錯誤。 – Dan 2012-02-06 15:07:33

你寫：

「在我的骨幹觀點我添加了一個（jQuery的標籤）模板一個div（視圖的EL）然後渲染該div「。

但它不完全正確。在你的代碼創建一個div id爲「用戶內容」視圖：

App.Views.IndexView = Backbone.View.extend({ 

    tagName: 'div', 

    id: 'user-content' 

    [...]

，我無法看到「user-content」 ID的DIV在html代碼。也許它在別的地方，你沒有在剪切/粘貼的代碼中顯示它？

可以聲明，其中div或id沒有在HTML代碼中存在的觀點，但你必須要聲明一個觀點是向上的層次結構（通常是AppView），您動態創建IndexView和追加它以現有的元素做這樣的事情：

window.AppView = Backbone.View.extend({ 
    [...] 
    render: function (item) { 
     var myView = new IndexView({ model: item }); 
     this.el.append(view.render().el); 
    }

上stackoverflow這個鏈接可以有一定的幫助，也許。

希望這有助於。

來源

2012-02-06 15:47:06

你是對的，'用戶內容'div不會**以前存在於任何HTML代碼中，而是它是所討論視圖的'el'。我使用'$（'target-node'）。append（view.render（）。el）''將視圖的'el'，即'user-content' div附加到路由器中的目標節點。我沒有在我的OP中包含這個片段，因爲我不認爲它增加了問題的價值/清晰度。 – Dan 2012-02-06 16:24:09

好的。所以，如果我理解正確，你可以渲染視圖，但它不會像你想的那樣顯示在屏幕上，即「標題標題顯示在垂直列表中而不是水平」標籤「上」先前的評論，不是嗎？ – 2012-02-06 16:55:48

正確，但問題似乎不是CSS相關。我已經刪除了除jQuery以外的所有CSS文件，問題依然存在。這裏是我想要實現的模型：http://jsfiddle.net/BSgwf/2/ – Dan 2012-02-06 20:19:51

jQuery選項卡在主幹視圖

回答

相關問題