Backbone Marionette模塊作爲小工具類似Twitter的飛行

我正在閱讀選擇正確的客戶端框架來細分/模塊化我的前端代碼的小工具。Backbone Marionette模塊作爲小工具類似Twitter的飛行

基本上我有/要的就是：

一個複雜的網站有多個pagetypes，所以沒有單頁的應用程序。
所有頁面都可以在不使用JavaScript的情況下呈現完整頁面。 IOW：JavaScript僅用於充實。
很多頁面都有一個非常動態的方式，可以在屏幕上顯示小部件。在服務器端，我模塊化我的代碼爲小部件（複合模式），其中每個插件負責它自己克服複雜：
- 服務器端控制器代碼
- 服務器端模板（使用霍根/鬍子）
- 路由終端，它應該需要從客戶端
- 結構CSS稱爲（CSS converning小部件的結構，而不是外觀&感覺）
服務器端雷吉奧nManager最終決定渲染哪些小部件以及它們在屏幕上的渲染位置。結果是RegionManager將整個html（服務器生成的）作爲所有小部件的渲染組合進行分離。

現在，這些小部件中的一些具有客戶端邏輯並需要在客戶端上重新渲染。以一個實例爲例，它需要能夠通過ajax進行更新。（我已經描述了這個過程，它在客戶端和服務器上使用DRY模板，here）

我最終想要的是，由於我已經在服務器上使用了複合模式，所以想把它擴展到客戶端，一個Widget（屏幕上的一個特定的邏輯塊）包含所有提到的服務器端代碼，以及所有需要的客戶端代碼。

我希望這是有道理的。

在這種情況下，Marionette是否適合用作客戶端框架？我在問，因爲我不是100％確定一個木偶模塊的概念是否被描述爲上述情景中的一個小部件。（我在我的問題中提到Twitter Flight，因爲我相信這會很合適，但是它現在太新了，以至於我暫時不願意跟它一起使用。我基本上在想我在問什麼如果任何人有一些經驗沿着這些路線做某事

來源

2013-02-26 Geert-Jan

Twitter表示他們已經在他們的web應用中使用了Flight，所以雖然其開源是新的，但它本身並不是新功能。如果你認爲它適合你，你應該試試看。我認爲它比「Marionette」更適合「Javascript只能用作豐富」。 – Greg 2013-03-02 11:39:25

我對飛行沒有任何經驗，所以我不能說那個。 'Marionette'可能是你想要做的事情的矯枉過正，但是直接的'Backbone.View'可能對DOM操作有幫助。使用'Backbone.View'模塊將有助於組織代碼並將DOM操作的範圍限制在一個元素上。 – mnoble01 2013-03-19 17:23:25

我認爲只是使用Backbone.js對於你描述的這種類型的應用是完美的你可能已經閱讀過這篇文章，但是大多數骨幹文獻都是圍繞着您的視圖具有關聯的服務器生成的JSON模型和集合，然後使用View的渲染功能生成（在客戶端上）代表模型/集合的HTML UI。

H但它不有這種方式使用。事實上，沒有任何東西可以阻止您將視圖附加到已包含內容的現有元素，從而爲您提供Backbone模塊化，事件系統等的所有優點。我經常使用沒有模型或集合的視圖，純粹是因爲我喜歡風格的整合。我還使用了一種方法，就像我在下面描述的那樣，我不得不使用那些尚未得到的舊的，現有的應用程序，或者永遠不會有一個很好的REST API，但它們確實提供了HTML中的內容。

首先，讓我們假設下面的HTML代表你的部件之一：

<div id="widget"> 
    <div class="widget-title"></div> 
    <div class="widget-body"> 
     <!-- assume lots more html is in here --> 
     <a href="/Controller/DoWidgetStuff">Do something!</a> 
    </div> 
</div>

在這種情況下，你可以使用骨幹與單Widget模型。這將是一個非常簡單的模型，就像這樣：

App.WidgetModel = Backbone.Model.extend({ 
    intialize: function() { 
     this.url = this.options.url; 
    } 
});

注意到了Widget收到一個URL作爲參數傳遞給它的構造函數的事實/初始化功能。這個小部件模型將代表許多你的小部件（當然，你可以採用這種通用的方法來處理更復雜的模型，並從呈現的HTML中採集不同的數據）。所以接下來你的意見。正如你可能知道的那樣，當你實例化它們時，通常你會將大多數視圖傳遞給模型或集合。然而，在這種情況下，你可以創建一個在您查看的初始化函數窗口小部件模型，並從預渲染HTML傳遞一個網址如下：

App.WidgetView = App.View.ComboboxView = Backbone.View.extend({ 

    initialize: function() { 

     this.model = new App.WidgetModel({}, { url: this.$("a").attr("href") }); 

    } 

    // rest of the view code 

});

所以實例化的看法是這樣的：

new App.WidgetView({el: $("#widget")})'

通過完成以上所有操作，您幾乎可以完成主幹提供給您的所有功能，並且可以很好地模塊化和封裝，這就是您所追求的目標。

這整個方法的最終結果是：

您已經呈現了Widget UI爲純HTML它（我認爲）是功能沒有JavaScript。
您將視圖附加到現有的HTML。
通過使用jQuery從呈現的HTML中抽取（例如URL），您可以將View作爲選項傳遞給View。
視圖負責實例化模型傳遞模型需要的相關選項（如URL）。
這意味着所有動態服務器端內容都包含在呈現的HTML中，並且您的View是一個模塊化JavaScript組件，可以對其執行任何操作，我認爲這是您所追求的最終結果。

所以你提到你想爲你的小部件提供AJAX功能，而且這種方法也很好。使用這種方法，您現在可以使用Widget模型上的標準Backbone fetch和save函數獲取新內容。在這個例子中，它來自從呈現的HTML檢索的URL。當您獲得響應時，您可以使用視圖，渲染函數或其他更精細的函數根據需要更新頁面上的HTML。

的幾點：

看出來的是，你需要改變的fetch和save功能爲「text/html的」內容類型，如果是這樣的服務器是什麼的唯一的事提供。例如：

this.model.fetch({ 
    type: "POST", 
    contentType: "text/html" 
});

最後，我提出的模型是沒有內容實例化的。但是，如果您的ajax調用的內容類型爲「text/html」，則可能需要隨身攜帶模型，以便它可以將其正確存儲在其屬性集合中。有關更多信息，請參閱this answer。

來源

2013-07-03 07:43:46 dcarson

對不起，在完成之前發貼回覆。仍在編輯:) – dcarson 2013-07-03 07:44:08

現在全部完成了，謝謝 – dcarson 2013-07-03 08:25:07

另外，您的問題還是比較陳舊，所以如果您已經完成了實際操作，最好能夠聽到您的結果。 :) – dcarson 2013-07-03 08:51:11

Backbone Marionette模塊作爲小工具類似Twitter的飛行

回答

相關問題