处理ember中的嵌入式数据



假设我有一个图形(树,无论什么),其结构在纯JS中是这样的:

var trees = [{
  name : 'my tree',
  nodes : [
    {
      id : 0,
      name : 'node 0',
      type : 'fruit',
      connectedTo : [1,2]
    },{
      id : 1,
      name : 'node 1',
      type : 'fruit',
      connectedTo : [3,4]
    },{
      id : 2,
      name : 'node 2',
      type : 'fruit',
      connectedTo : []
    },{
      id : 3,
      name : 'node 3',
      type : 'non-fruit',
      connectedTo : []
    },{
      id : 4,
      name : 'node 4',
      type : 'non-fruit',
      connectedTo : []
    }
  ]
}]

现在在Ember中,它需要我有一个Tree, Node,也许还有一个类型模型。不要紧。但是,我需要将数据解析为树状图。但是当我访问数据时,它就像get()then()调用链(模型之间的关系是异步的)。

this.get('nodes').then(function(nodes){
  nodes.forEach(function(node){
    node.get('type').then(function(type){
      console.log(type.get('type')) // OMG
    });
  })
});

我希望以点表示法访问它们,比如tree.nodes[1].type。这在烬有可能吗?我读过几篇处理嵌入式数据的文章,他们所做的就是将外部数据规范化到Ember模型。我不想那样。我想要的是处理嵌入数据应用程序。

你可以在Ember中使用纯js对象,而不需要像这个例子中那样使用Ember Data。

<script type="text/x-handlebars" data-template-name="index">
    <ul>
    {{model.name}}
    {{#each item in model.nodes}}
      <li>{{item.id}}</li>
      {{#each connectedTo in item.connectedTo}}
        {{connectedTo}}
      {{/each}}
    {{/each}}
    </ul>
</script>

一旦你把你的模型数据设置为你的控制器内容,你就可以把你的内容当作普通的ember对象来操作了。

App.IndexRoute = Ember.Route.extend({
  actions: {
    changeValues: function(){
      this.controller.set('content.name', 'changed');
      this.controller.set('content.nodes.firstObject.id', 7);

    }
  },
  model: function() {
    return {
  name : 'my tree',
  nodes : [
    {
      id : 0,
      name : 'node 0',
      type : 'fruit',
      connectedTo : [1,2]
    },{
      id : 1,
      name : 'node 1',
      type : 'fruit',
      connectedTo : [3,4]
    },{
      id : 2,
      name : 'node 2',
      type : 'fruit',
      connectedTo : []
    },{
      id : 3,
      name : 'node 3',
      type : 'non-fruit',
      connectedTo : []
    },{
      id : 4,
      name : 'node 4',
      type : 'non-fruit',
      connectedTo : []
    }
  ]
};
  }
});

最新更新