Question

我们有一个现有的Genealogy网站，它不是一个单页面的应用程序，多年来我们创建了许多jQuery插件，用于执行诸如typeahead，各种基于模式的实用程序以及可重用的组件之类的操作网站。我们不是单页应用程序，因为我们是内容发布者，我们还不确定搜索引擎会在我们的用例中可靠地索引这些内容。

我们现在正在考虑添加一些具有多视图模态流的更复杂的小部件。我们的Genealogy网站的一个例子是，在许多情况下，用户必须从他们关注的记录池中选择一个人员记录，或者可选地创建一个新记录。

例如，假设您正在查看想要更改某人的家谱关系的人员记录。单击链接，会出现一个模式，允许您编辑它们的关系。我们设想了一个模态流程，如下所示：

查看1（索引）：列出当前关系的管理页面，以及允许您选择关系类型的“添加人员”下拉菜单（父级，配偶，子级，兄弟姐妹）
查看2（添加人）：我们显示带有typeahead支持的文本输入字段。当用户输入时，我们会在他们的图表上查看人群，并尝试进行匹配。如果它们匹配typeahead中的某些内容，我们可以捕获它并将其发送回父应用程序。
查看3（搜索匹配项）：用户可能刚刚错过了预先输入结果 - 因此请允许API查看其图表中是否存在任何可能的匹配项。允许用户选择匹配，然后将其发回。如果没有匹配项，他们可以点击“这些不是我的人”
查看4（创建人）：如果我们在图表中找不到匹配的人，那么这是一个全新的人。给他们一个表格，提供有关此人的详细信息。

我对此可能是最好的解决方案感到茫然。我查看了EmberJS和AngularJS，这两个社区的人都建议如果你不构建单页应用程序，那么使用这些框架是不值得的。

有人能指出我正确的方向吗？我不能在这个用例中独一无二！

Answer 1

我使用Knockout.js和Ember.js构建了几个mini-SPA应用。服务迷你单页应用程序而不是转换整个应用程序有很多充分的理由，主要是客户端代码不能更好地所有。

根据我的经验，Angular和Ember.js都是非常有用的，而不会让你的整个应用程序客户端。 Ember为您提供了一些非常有用的工具来制作“小部件”。

例如，如果我希望我的Ember应用程序在服务器端页面的一部分上呈现，我可以这样做：

var App = Ember.Application.create({
  // Set the rootElement property to the div that I want my ember app to render inside
  rootElement: "#your-root-element",
  Resolver: Ember.DefaultResolver.extend({
    resolveTemplate: function(parsedName) {
      // Override this method to make this app look for its templates in a subdirectory
    }
  }),
});

// Don't render the app on any page by default
App.deferReadiness();

// Instead, check to see if the #rootElement is present on the page before rendering.
$(document).ready(function() {
  if ( $(App.get('rootElement')).length > 0 ) {
    App.advanceReadiness();
  }
});

我相信你可以和Angular.js做类似的事情。我更喜欢Ember，原因如下：

真正的class / mixin系统。当你想共享代码时，这非常有用：对于习惯在服务器端工作的人来说，它应该非常熟悉。
非常灵活templating.
明确区分关注点，允许优雅地处理许多不同的视图等。

用于在非SPA站点上构建可重用组件的Javascript MVC框架

1 个答案: