使用Java服务器引导backbone.js模型

Question

我计划使用backbone.js和运行jersey的java后端构建单页面web应用程序。我有兴趣在初始加载时将模型数据引导到页面中，以防止额外的ajax请求，这是backbone.js文档建议的方法：

“当您的应用程序首次加载时，通常会有一组初始模型，您知道您需要它们来呈现页面。而不是触发额外的AJAX请求来获取它们，更好的模式是将它们的数据预先引导到页面中。”

我认为我需要做的事情的示例在backbone-patterns中提供了Ruby和PHP的示例，但我还没有理解如何在Java中实现。我需要使用诸如mustache.java之类的模板库，并在服务之前对页面进行预处理吗？能否给我一个具体的示例？

谢谢，Mark

- MarkNS

Answer 1

解决方案因模板引擎而异。我不太了解Moustache.java，无法翻译此JSP示例。使用Jackson进行JSON序列化，这将是JSP标签文件：

public class JsonTag extends SimpleTagSupport {

/** the instance to serialize as JSON JSON */
private Object value;

@Override
public void doTag() throws JspException, IOException {
    String json = new ObjectMapper().writeValueAsString(value);
    getJspContext().getOut().print(json);
}

public void setValue(Object value) {
    this.value = value;
}

}

还有你的HTML页面：

<script>
var router = new App.TabRouter({
    model: new App.MyModel(<k:json value="${it}"/>)
});
</script>

对于一个严肃的应用程序，您应该重复使用ObjectMapper实例，而不是每次都创建一个新的实例。

- Nacho Coloma

Answer 2

是的，您需要某种形式的模板来将动态数据与HTML页面的静态布局混合。但是，如果您只有一个页面，您可能不想投资于设置整个模板方案。相反，您可以将页面分成两个部分，并通过发布第一部分后跟JSON表示，然后是第二部分来提供主页。这有点丑陋，但是否值得为此单独情况添加模板取决于您。如果选择使用模板，则可以使用mustache或我建议的Velocity Templates。

阅读Jersey代码，看起来您需要显式调用Jackson将Java中的引导模型对象转换为JSON。

- Old Pro

---

感谢您的建议，老手。虽然Web应用程序一开始只有一个页面，但我希望它随着时间的推移而扩展，因此我想在开始时解决架构问题。由于我对Jersey不熟悉，我不知道ViewProcessor接口，它允许与模板库集成。现在我有了一个MustacheViewProcessor，它处理从控制器返回的Viewable和数据实体映射。但是，您关于从控制器明确返回json的观点是正确的。（尽管如果不使用视图处理器可能也可以实现） - MarkNS

Answer 3

我对Jersey不太熟悉，但是浏览了文档后，它似乎主要是一个Restful Web Service框架。使用@Produces注释可以提供"text/html"的内容类型，但我没有看到明显的使用模板系统渲染视图的方法。因此，最好从Java Web框架（如Spring或Play Framework）开始，通过视图模板（例如Mustache）提供包含引导数据集合的初始HTML。您仍然可以使用Jersey来提供后续的Ajax/Restful调用，但是Spring和Play也内置了Restful概念。

- trungly

---

感谢trungly的帮助 - 我实际上花了几个小时阅读Play文档，认为这可能会让我的生活更轻松，然后读到Play 2.0（很可能）永远无法在GAE上运行，并决定放弃。如在对Old Pro的评论中所提到的，Jersey与模板库有集成点，我只需要找到它们。不确定这里的正确礼仪是什么，但我将接受他的答案，主要是因为详细的答案在我的评论中，希望这对你没问题！ - MarkNS

Answer 4

为了引导您的模型数据，您只需将模型JSON呈现为一个标签即可。来自backbone-patters链接的释义：

<script>
  // app data, rendered on server
  var photosJSON = [
    { id: 2, name: "My dog", filename: "IMG_0392.jpg" },
    { id: 3, name: "Our house", filename: "IMG_0393.jpg" },
    { id: 4, name: "My favorite food", filename: "IMG_0394.jpg" },
    { id: 5, name: "His bag", filename: "IMG_0394.jpg" },
  ];
 </script>      
 ...

 <script>
  var Photo = Backbone.Model.extend({
  // photo attributes (from above)
  });

  var PhotoCollection = Backbone.Collection.extend({
     model:Photo
  });

  // build collection model without AJAX call using
  // server rendered JSON above
  var photosCollection = new Photos(photosJSON);
</script>

您可以在服务器上使用任何适当的技术来呈现带有JSON数据的脚本。

- Roger Castillo

---

这个回答完全回避了问题，问题是关于在服务器端使用什么技术来呈现带有JSON数据的脚本。 - Old Pro