Ember.js通过迭代从JSON生成HTML [英] Ember.js generate html from json with iteration

问题描述

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

I'm supposed to use ember.js for a project. I'm converting a json into a HTML view. The json looks something like this:

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

所以结果应该看起来像

某些H1标题

某些H2标题

不管它是动态的，还是带有把手的，都没关系.

So the result should look like

Some H1 Title

Some H2 Title

Doesn't really matter if it's dynamic with handlebars or static.

推荐的emberjs方法是什么?将整个json加载到数据模型中，然后从那里去?还是只是将物体交给车把? (顺便说一句，需要一些基本的if逻辑，所以最后一个选择可能不是最好的(例如，需要更多代码).)

What is the recommended emberjs way of doing this? Load the whole json into a data model and go from there? Or just give the object to handlebars? (there is the need for some basic if else logic by the way so the last option might not be the best (e.g. needs more code)).

推荐答案

如果json中的数据在应用程序的数据模型中具有某些含义，则应将其放在ember对象的结构中，并将其分配给的属性.控制器.如果只需要显示json数据，而在应用程序的数据模型中没有任何意义，则可以直接将其作为属性直接分配给视图或控制器.

If the data in json has some meaning in the data model of your application, then you should place it in a structure of ember objects and assign them to properties of the controller. If you only need the json data to be displayed and has no meaning in your application's data model, then you can simply assign it directly as a property to the view or controller.

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

In all cases you will need a handlebars template that will display the data stored in those properties.

例如，如果您具有由字符串作为title的对象和与children相同的对象组成的数组组成的json数据，并且想要显示所有子级的所有标题，而不论深度如何，您都可以执行以下操作，

For example if you have json data that is composed of objects with a string as title and array of the same objects as children and you want to display all titles of all children regardless of depth you could do something like,

http://emberjs.jsbin.com/Ug​​aVAvIZ/1/edit

hbs

<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数据作为模型分配给特定的路线和相应的视图.

Please note that using a partial as shown is only one of many other approaches. In this approach the json data has been assigned as model to the specific route and the corresponding view with the help of a partial display the required data.

这篇关于Ember.js通过迭代从JSON生成HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！