javascript - Ember.js 通过迭代从 json 生成 html

Question

我应该为一个项目使用 ember.js。我正在将 json 转换为 HTML View 。 json 看起来像这样:

{
"title": "Some H1 title",
"children": [
    {"title": "Some H2 title",
    "children": .....
    }
]
}

所以结果应该是这样的

一些H1标题

一些H2标题

它是带 Handlebars 的动态还是静态并不重要。

推荐的 emberjs 方法是什么？将整个 json 加载到数据模型中并从那里开始？或者只是将物体交给 Handlebars ？ (顺便说一句，需要一些基本的 if else 逻辑，因此最后一个选项可能不是最好的(例如，需要更多代码))。

Answer 1

如果 json 中的数据在您的应用程序的数据模型中具有某种意义，那么您应该将其放置在 ember 对象的结构中并将它们分配给 Controller 的属性。如果您只需要显示 json 数据并且在应用程序的数据模型中没有任何意义，那么您可以简单地将其作为属性直接分配给 View 或 Controller 。

在所有情况下，您都需要一个 handlebars 模板来显示存储在这些属性中的数据。

例如，如果您有 json 数据，该数据由字符串为 title 的对象和相同对象的数组 children 组成，并且您想要显示所有标题所有的 child ，无论深度如何，你都可以做类似的事情，

http://emberjs.jsbin.com/UgaVAvIZ/1/edit

健康管理系统

<script type="text/x-handlebars">
    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="index">
    <h1>{{title}}</h1>
    {{partial "childrenPartial"}}
  </script>

  <script type="text/x-handlebars" data-template-name="_childrenPartial">
    {{#each child in children}}
    <h2>{{child.title}}</h2>
    {{#with child.children}}
    {{partial "childrenPartial"}}
    {{/with}}
    {{/each}}
  </script>

js

App = Ember.Application.create();

App.Router.map(function() {
  // put your routes here
});

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return {"title": "Some H1 title","children": [{"title": "Some H2 title","children": []}]};
  }
});

请注意，如图所示使用部分只是许多其他方法中的一种。在这种方法中，json 数据已作为模型分配给特定的路由，并在部分显示所需数据的帮助下显示相应的 View 。