Ember.js如果没有创建childView，则隐藏视图 [英] Ember.js Hiding a view if no childView is created

问题描述

我在这里的基本情况是这样的：

What I'm having here is basically look like this:

filter    
  |_ todo
  |_ todo

filter   
  |_ todo

filter
  |_ todo          

几个过滤器视图，其中嵌入了 todoView 。

所以我先创建一个filterView实例并传入所有参数。

So first I'm creating instances of filterView and pass in all the params.

<ul id="todo-list">

  {{view 'filter' control=controller.beforeFilter title="Before" }}

  {{view 'filter' param='0' control=controller.todayFilter title="Today"}}

  {{view 'filter' param='1' control=controller.tomorrowFilter title="Tomorrow" }}

</ul>

这是在filterView中的样子：

This is how it look like in filterView:

App.FilterView = Ember.View.extend({
  classNames: ['filter-container'],
  templateName: 'datefilter',
  title: 'Today',
  param: null,
  control: null,
  isHide: false,

  click: function(){
    this.toggleProperty('isHide');
  }
});

和相应的模板：

<div class="filter-bar">
  <label class="filter-title">{{view.title}}</label>
  <label class="filter-date">{{generateDate view.param}}</label> <!-- This is a handlebar's helper -->
  <div class="filter-right-container">
    <div class="filter-count">
      <label> count </label>  <!-- Show number of todos in this filter -->
    </div>
  </div>  
</div>
<div class="filter-box" {{bind-attr class=view.isHide:hide}}>
  {{#each todo in view.control}}  <!-- So this will turn to in controller.someFunction -->
    {{view 'todo'}}
  {{/each}}  
</div>

这将是TodoView

And this will be the TodoView

App.TodoView = Ember.View.extend({
  templateName: 'todolist',
  contentBinding: 'this',
  classNames: ['todo-box']
})

最后控制器

App.TodosController = Ember.ArrayController.extend({
  beforeFilter: function(){
    return this.get('model').filter(function(todo, index){
      var date = todo.get('date');

      if(moment(date).isBefore(moment(), 'days')){
        return todo;
      }
    });
   }.property('[e-mail]'),


  todayFilter: function(){
    return this.get('model').filter(function(todo, index){
      var date = todo.get('date');

      if(moment().isSame(date, 'days')){ 
        return todo;
      }
    });
   }.property('[e-mail]'),


  tomorrowFilter: function(){
    return this.get('model').filter(function(todo, index){
      var date = todo.get('date');

      if((moment().add(1, 'days')).isSame(date, 'days')){  
        return todo;
      }
    });
   }.property('[e-mail]'),
});

所以TodoView将根据返回过滤的记录创建，但有时候什么都不会返回。所以问题是如果没有创建TodoView，如何隐藏filterView？

So the TodoView will be created according to the return filtered record, but sometimes nothing will get returned. So the question is how to hide the filterView if no TodoView is created?

有没有像

{{#each todo in view.control}} 
  {{view 'todo'}}
{{else}}
  {{'Set filterView isVisible to false'}}
{{/each}}

或者我可以很容易地使用collectionView完成这个工作？但是如何？

or I could easily get this done using collectionView? but how?

真的感谢任何帮助

推荐答案

那么我做的不是直接从控制器返回，我检查长度并将其保存在另一个变量中：

So what I did is instead of return directly from the controller, I check the length and save it in another variable:

beforeFilter: function(){
  var data = this.get('model').filter(function(todo, index)
  {
    var date = todo.get('date');
    if(moment(date).isBefore(moment(), 'days')){
      return todo;
    }
  });
  this.set('beforeCount', data.length);
  return data;
}.property('[e-mail]')

创建新实例时的看法，我会再传一个参数（controller.variable保存长度）：

When creating new instance of view, I'll pass one more param in (the controller.variable which save the length):

{{view 'filter' control=controller.beforeFilter countControl=controller.beforeCount title="Before" }}

我们可以先查看长度，如果没有，我们将隐藏标题：

And in the view, we can first check the length, and if theres nothing, we will hide the header:

dataChanged: function(){
  var count = this.get('countControl'); //<-- this will get the length of the return data
  if(count<1){
    this.set('isVisible', false);
  }
}.observes('countControl').on('didInsertElement')

这篇关于Ember.js如果没有创建childView，则隐藏视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！