我想我沒有正確使用Backbone JS的視圖？

我剛開始使用Backbone（和Underscore）JS。我們正在做一個大的iPad HTML5應用程序，它需要在所有客戶端工作。該項目需要結構和骨幹似乎是一個很好的契合。似乎沒有太多的方式，可以作爲一個工具包使用（特別是因爲也需要下劃線）。我想我沒有正確使用Backbone JS的視圖？

雖然我有一個問題。這個HTML5應用程序基本上是一個單頁面應用程序。一切從index.html文件開始。我一直在瞭解Backbone管理URL片段的方式，我非常喜歡。將路由事件設置爲特定模型很容易。

這HTML5應用我的工作有它的「頁」的嵌套層。大約有三層嵌套。這就是這個應用程序使用的JSON數據（我還沒有進入本地數據庫存儲等，但也許我應該？只是想讓我的頭腦圍繞主幹）。它們是普通的網頁，因此它們只是加載到Web應用程序各個部分的內容頁面。

我一直在使用視圖。我認爲我有這個概念......用數據填充集合，而視圖是圍繞這個數據集合構建的。我明白，對於模型的單個實例，它有一個視圖可以使用它。然後，當您想要查看模型的Collection時，可以調用一個View來遍歷Collection並調用每個模型的View。

對不起，我知道我沒有做大概多大意義！

但基本上，我看到骨幹視圖用於以單個模型生成HTML，一個模型的收藏......所以這是關於一個視圖排序的頁面的各個部分所有的小意見，但什麼整個頁面？說這個HTML5應用程序有一個基本的模板，但不同的Web應用程序頁面需要不同的整個頁面佈局，所以他們可以看看他們應該怎麼做？你可以做這種事情？基本上有一個視圖，執行Ajax調用來獲取整個頁面模板？

下面的例子是一個其從主構造時調用的URL是在該應用程序的根查看。我想要設置各種不同的視圖，當用戶處於不同的URL時，我的應用需要顯示這些視圖。加載像我這樣的整個Ajax模板是不對的？還有什麼其他方式可以擁有單頁面應用程序，還可以爲網站的所有不同位設置可管理的頁面模板？

App.View.Home = Backbone.View.extend({ 
    tagName: "article", 
    id: "view-home", 
    initialize: function() { 
     _.bindAll(this, "render"); 
    }, 
    render: function() { 

     var that = this; 

     $.get("templates/home.html", function(templateHtml) { 
      $(that.el).html(_.template(templateHtml)); 

      // we want tabs in this template too 
      var tabs = new App.View.Tabs(); 
      $(that.el).find('#main').html(tabs.render().el); 

     }, "html"); 

     return that; 
    }, 
});

對不起，如果這樣做沒有多大意義。我一直在努力學習這麼多。

來源

2011-03-28 littlejim84

我實在看不出什麼毛病這種方法卻很難，沒有看到更多的代碼說。重要的是不要過分考慮骨幹。只有少數骨幹設計要做的事情，除此之外，您可以根據需要利用該功能。

至於這個特定的問題，我看不出有任何理由你不應該做你正在做的事情在這裏。我一定會確保你在需要它們之前不加載/獲取任何數據或模板。我還要確保在渲染視圖之前，您需要從服務器獲得所有需要的數據（因此視圖不會一刀切）。這些最後一點只是指導方針，並不與骨幹網有任何關係。但老實說，這是骨幹的特點之一：它做了幾件事情，然後走出困境。

來源

2011-03-28 23:30:33

@安德魯野兔謝謝。良好的答覆...我發現混亂的一點是我的單頁應用程序，因此，本質上，它仍然像一個完整的HTML網站。這不是完全重新創建，因爲很多位都是動態的......但是在某些情況下，我需要爲網站的不同部分提供幾乎完整的頁面模板。似乎我會Ajax整個頁面，然後掛我的新動態位？這樣做會導致看起來像這樣「不穩定」。我仍然不確定如何處理... Ajax中的頁面模板（以保持我的代碼的組織）？ – littlejim84 2011-03-29 08:32:34

我認爲最簡單的方法是有很多的看法和許多模板，從控制器和視圖中的模板創建的意見。

我們一直在使用jqote2進行模板設計，這很好，我們先將所有模板緩存起來，讓數據驅動應用程序。

每個視圖都可以呈現給定div的標記讓我們說。

然後控制器例如可以創建多個視圖： -

App.Controllers.X = Backbone.Controller.extend({ 
    .... 
    index: function() { 
     new App.Views.View1({ 
     el: 'div#id1, 
     ... 
     }); 
     new App.Views.View2({ 
     el: 'div#id2, 
     ... 
     }); 
etc 
    }

希望這有助於

來源

2011-03-29 19:06:53

我想我沒有正確使用Backbone JS的視圖？

回答

相關問題