Question

我有一个带有一些对象的数据数组：

dataArray: [
    {name: 'n1', b: 2, c: 3},
    {name: 'n2', b: 5, c: 6},
    {name: 'n3', b: 8, c: 9}
]

我将其初始化dataArray: Ember.A([])并使用pushObject( Ember.Object.create( dataItem ) )推送此对象中的数据

一个复杂的嵌套数组，其中每个对象可以出现零次或多次。此数组从服务器加载并用于模板中的显示目的。看起来像这样：

displayedArray: [
    [
        {name: 'n2'},
        {name: 'n3'},
        [
            {name: 'n1'},
            {name: 'n2'},
            {name: 'n3'},
        ]
    ]
    {name: 'n3'},
    {name: 'n1'}
]

我的数据阵列中每个对象的键/值对在async callas到服务器之后更新。当我的数据对象通过注入/删除或更新键/值对来更新时，我需要更新显示数组中的所有对象。

我想我应该使用类似的东西：http://emberjs.com/guides/object-model/bindings/

但我无法弄清楚如何在我的情况下使用它。

Answer 1

顺便说一句，如果你有同样的问题而且没有解决方案，这就是我现在的工作方式：

我有这样的更新功能：

update: function() {
    var self = this;

    var runUpdate = function( target ) {
        _.each(target, function(item){
            if( Ember.typeOf( target ) === array ) {
              runUpdate(item);
            }
            else {
                item.setProperties( _.findWhere( self.get('dataArray'), {name: item.name} ) );
            }
    }
    runUpdate( self.get('displayedArray') );
}

这只是一个递归函数，用于从数据数组中的源中更新嵌套数组中的每个对象（_.each和_.findWhere来自lodash，因为我（习惯了它，但是ember几乎一样）公用事业）

Answer 2

如果您将数据存储在ember对象中并遵循ember get / set范例，那么您数据的所有更改都将反映到您的模板中。例如，

http://emberjs.jsbin.com/OMItuCiN/1

<强> HBS

<script type="text/x-handlebars">
    <h2>Welcome to Ember.js</h2>

    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="index">
  {{#if data}}
    <ul>
    {{#each item in data}}
      <li>{{item.name}}</li>
    {{/each}}
    </ul>
    <button {{action 'update'}}>update data</button>
    {{else}}
    loading....
    {{/if}}
  </script>

<强> JS

App = Ember.Application.create();

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

App.IndexRoute = Ember.Route.extend({
  setupController:function(controller,model){
    asyncUpdate(controller);
  }
});

App.IndexController = Ember.Controller.extend({
  data:[],
  actions:{
    update:function(){
      this.set('data',[]);
      asyncUpdate(this);
    }
  }
  /*namedEntities:function(){
    return data;
  }.property('data.@each.name')*/
});

App.NamedEntity =  Ember.Object.extend({
  name:null
});

function asyncUpdate(controller){
  /*get data from server*/
    setTimeout(function(){
      var data=[];
      var dataFromServer = '[{"name": "n'+Math.round(Math.random()*10)+'", "b": 2, "c": 3},{"name": "n'+Math.round(Math.random()*10)+'", "b": 5, "c": 6},{"name": "n'+Math.round(Math.random()*10)+'", "b": 8, "c": 9}]';
      JSON.parse(dataFromServer).forEach(function(namedEntity){
        data.pushObject(App.NamedEntity.create({name:namedEntity.name}));
      });
      controller.set('data',data);
    },2000);
}

如果你有一个复杂的数据结构，你需要在ember对象关系中容纳它。

在您的情况下，如果您将数据转换为简单数组，我认为您已经完成了，那么上面的示例应该有所帮助。否则，如果您的数组属于不同的组，则尝试创建表示包含子ember对象数组的这些组的ember对象，依此类推。

在ember中绑定数据

2 个答案: