Backbone.js 主干木偶模块作为类似于Twitter Flight的小部件

我正在阅读如何选择正确的客户端框架来在小部件中分割/模块化我的前端代码

基本上，我拥有/想要的是：

• 一个具有多种页面类型的复杂网站，因此没有单页应用程序
• 所有页面都能够在不使用javascript的情况下呈现完整的页面。IOW:javascript仅用作扩展
• 很多页面都有一种非常动态的方式，可以在屏幕上显示小部件。为了克服服务器端的复杂性，我将代码模块化为小部件（复合模式），每个小部件负责自己的工作：
  • 服务器端控制器代码
  • 服务器端模板（使用hogan/mustache）
  • 路由端点，是否需要从客户端调用
  • 结构化css（与外观相反，改变小部件结构的css）
• 服务器端区域管理器最终决定呈现哪些小部件以及它们在屏幕上呈现的位置。最终结果是RegionManager将整个html（服务器生成的）作为其所有窗口小部件呈现的组合输出

现在，这些小部件中的一些具有客户端逻辑，需要在客户端重新加载。以searchpage为例，它需要能够通过ajax进行更新。（我已经描述了这个过程，它在客户端和服务器上使用干式模板。）

我最终想要的是，考虑到我已经在服务器上使用了复合模式，以某种方式将其扩展到客户端，以便一个小部件（屏幕上的一个特定逻辑块）包含所有提到的服务器端代码，以及所有需要的客户端代码

我希望这是有道理的

在这种情况下，木偶是否适合用作客户端框架？我之所以这么问，是因为我不能100%确定木偶模块的概念是否就是我在上述场景中描述的小部件。（我在我的问题中提到了Twitter航班，因为我相信这会是一个合适的选择，但它目前是如此的新，以至于我现在还犹豫要不要去使用它。）_

---

我想基本上我要问的是，是否有人有做这些事情的经验。

我认为只使用Backbone.js非常适合您所描述的这种类型的应用程序。您可能已经阅读过这篇文章，但大多数Backbone文献都集中在您的视图中，其中包含相关的服务器生成JSON模式ls和集合，然后使用视图的呈现函数（在客户端上）生成表示模型/集合的HTML UI

然而，它不必以这种方式使用。事实上，没有什么能阻止您将视图附加到已经包含内容的现有元素，这为您提供了主干模块化、事件系统等的所有好处。我经常使用没有模型或集合的视图，纯粹是因为我喜欢视图的一致性我还使用了下面描述的方法，在我不得不使用旧的、现有的应用程序的情况下，这些应用程序还没有或者永远不会有一个好的RESTAPI，但它们确实以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>

请注意，小部件接收URL作为其构造函数/初始化函数的参数。此小部件模型将代表许多小部件（当然，您可以对更复杂的模型采用这种通用方法，并从呈现的HTML中提取不同的数据）。接下来是您的视图。您可能知道，通常在实例化大多数视图时会向它们传递一个模型或集合。但是，在这种情况下，您可以在视图的初始化函数中创建小部件模型，并通过预呈现的HTML向其传递URL，如下所示：

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")})'

通过完成以上所有工作，您可以完成主干网为您提供的几乎所有其他功能及其模块化和良好封装，这正是您所追求的

整个方法的最终结果是：

您已经将小部件UI呈现为纯HTML，它（我假设）在没有JavaScript的情况下可以正常工作

将视图附加到现有HTML

通过jQuery从呈现的HTML中提取内容（例如URL），将内容作为选项传递到视图中

视图负责实例化模型，并传递模型需要的相关选项（如URL）

这意味着所有动态服务器端内容最初都包含在呈现的HTML中，您的视图是一个模块化的JavaScript组件，可以对其进行操作，我认为这是您追求的最终结果

因此，您提到您希望为您的小部件提供AJAX功能，这种方法也很好。使用这种方法，您现在可以使用

小部件
模型上的标准主干
获取
和
保存
函数来获取新内容。在本例中，它来自从呈现的当您得到响应时，您可以使用视图、呈现函数或其他细粒度函数根据需要更新页面上的HTML

几点：

唯一需要注意的是，如果服务器提供的是“text/html”，则需要将
fetch
和
save
函数的内容类型更改为“text/html”。例如：

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

最后，我提出的模型是实例化的，没有任何内容，您可能需要使用您的模型，以便它可以将此内容正确地存储在其属性集合中。有关更多信息，请参阅。
Twitter表示，他们已经在其Web应用程序中使用Flight，因此尽管其开源是新的，但它本身并不是新的。如果您认为它适合您，您可能应该尝试一下。我认为它不适合他是爪哇人
this.model.fetch({
    type: "POST",
    contentType: "text/html"
});