自举主干。使用java服务器的js模型

Question

我正在计划一个带有主干的单页webapp。js和运行jersey的java后端。我感兴趣的是在初始加载时将模型数据引导到页面中，以防止额外的ajax请求，正如主干所建议的那样。js文档：

When your app first loads, it's common to have a set of initial models that you know you're going to need, in order to render the page. Instead of firing an extra AJAX request to fetch them, a nicer pattern is to have their data already bootstrapped into the page.

关于ruby和php，我认为我需要做的事情的例子在backbone-patterns中给出，但我并没有将这些点与java中的工作方式联系起来。我是否需要使用模板库，如Mustach。java并在服务页面之前对其进行预处理？有人能给我举个例子，看看会是什么样子吗

谢谢，马克

Answer 1

是的，您需要某种形式的模板，以便将动态数据与HTML页面的静态布局混合。然而，如果您只有一个页面，您可能不想投资建立一个完整的模板方案。相反，您可以简单地将页面分成两个部分，并通过在第一部分之后放置JSON表示，然后再放置第二部分来为您的主页提供服务。这有点难看，但这取决于你是否值得为这个案例添加模板。如果您选择使用模板，您可以使用mustache，或者我建议Velocity Templates.

通读Jersey代码，您似乎必须显式调用Jackson才能将引导模型对象从Java转换为JSON

Answer 2

我不熟悉Jersey，但看看文档，它似乎主要是一个Restful Web服务框架。看起来您可以使用@products注释提供“text/html”的内容类型，但我看不到使用模板系统呈现视图的明显方法。因此，您可能需要从Java web框架（如Spring或Play Framework）开始，以提供初始HTML，其中包括通过视图模板（如果您愿意，可以使用小胡子）引导的数据集合。您仍然可以使用Jersey来提供后续的Ajax/Restful调用，但是Spring和Play都内置了Restful概念

Answer 3

根据模板引擎的不同，解决方案也不同。我对胡子不太了解。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实例，而不是每次都创建一个新实例

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数据呈现脚本