Question

我正在研究habit tracking app。它是Ember.js的原生Android端口。用户能够查看他们记录各种习惯的历史记录：

section headers

我正在尝试使用CouchDB和D3支持的Ember重新创建日期部分标题。我必须显示没有节标题的事件的代码：

<script type="text/x-handlebars" id="events">
  {{#each model}}
    {{#link-to 'event' this}}
      <div class="row">
        <div class="asset-id col-xs-9">{{habit.name}}</div>
        <div class="col-xs-3">{{format-time-passed time}}</div>
      </div>
    {{/link-to}}
  {{/each}}
</script>

App.EventsRoute = Ember.Route.extend( {
  model: function() {
    return this.store
      .findQuery( 'event', {
        designDoc: 'event',
        viewName: 'by_time',
        options: {
          descending: true,
          limit: 100
        }
      } )
  }
} )

by_time视图是我创建的视图，它返回按时键入的事件。此代码可以工作并显示习惯名称和事件时间列表。我试图替换它的代码是：

App.EventsRoute = Ember.Route.extend( {
  model: function() {
    return this.store
      .findQuery(…)
      .then( function( data ) {
        var date = d3.time.format( '%Y-%m-%d' )
        return d3.nest()
          .key( function( d ) { return date( d.get( 'time' ) ) } )
          .rollup( function( d ) { return d } )
          .map( data.content )
      } )
  }
} )

这会生成以下形式的对象：

{
  '2014-05-22': [*model obj*, *model obj*],
  ⋮
}

然后我尝试使用以下模板渲染它：

 <script type="text/x-handlebars" id="events">
   <div id="events">
     <ol>
       {{#each model}}
         <li>
           <div class="row">
             <div class="col-xs-12">{{@key}}</div>
           </div>
           <ol>
             {{#each this}}
               {{#link-to 'event' this}}
                 <li><div class="row">
                   <div class="asset-id col-xs-9">{{habit.name}}</div>
                   <div class="col-xs-3">{{format-time-passed time}}</div>
                 </div></li>
               {{/link-to}}
             {{/each}}
           </ol>
         </li>
       {{/each}}
     </ol>
   </div>
 </script>

@key引用来自this post，但当我加入时，句柄会引发SyntaxError: Unexpected token ,。同样从这个答案，我应该能够迭代一个对象，但当我删除@key时，我得到了Error: Assertion Failed: The value that #each loops over must be an Array.

我可以重构数据以避免这种情况，但是我应该能够迭代对象属性吗？我正在使用Handlebars 1.1.2。

Answer 1

不，Ember Handlebars不支持迭代对象属性。车把和Ember车把之间有一些细微的差别。数据绑定是一件大事（这就是为什么它不起作用，它无法观察对象并始终知道对象已经改变）。

您可以将其转换为数组，但在添加其他属性的情况下，您将无法查看该对象。你最好把它转换成阵列。

Answer 2

所以最终解决方案看起来像：

App.EventsRoute = Ember.Route.extend( {
  model: function() {
    var self = this
    return this.store
      .findQuery( 'event', {
        designDoc: 'event',
        viewName: 'by_time',
        options: {
          descending: true,
          limit: 100
        }
      } )
      .then(
        function( data ) {
          var date = d3.time.format( '%Y-%m-%d' )
          var nested = d3.nest()
            .key( function( d ) { return date( d.get( 'time' ) ) } )
            .rollup( function( d ) { return d } )
            .map( data.content )
          var arr = []
          for( date in nested ) {
            arr.push( {
              date: date,
              events: nested[date]
            } )
          }
          return arr
        },
        function( err ) {
          alert( err.status + ": " + err.statusText )
          self.transitionTo( 'login' )
        }
      )
  }
} )

迭代Ember中的对象属性

2 个答案: