Encadeando classificação e pesquisa com controladores de matriz

Oi,

O corpo docente do Ember.SortableMixin é integrado ao controlador Array.

Isso nos dá uma maneira de usar 2 propriedades para controlar a atividade do mecanismo de classificação na propriedade ‘content’.

App.GoodiesController = Ember.ArrayController.extend
  sortProperties:["name"]
  sortAscending: true

Neste ponto – a propriedade ‘content’ ou ‘model’ agora é classificada de acordo com o ArrayController
e se você estiver fazendo um loop em #each sem nenhum argumento, obterá os benefícios imediatamente.

Mas e se você precisar usar o conteúdo classificado como entrada em outro mecanismo – por exemplo, resultados de pesquisa?

Digamos que você configurou um campo de pesquisa denominado ‘searchText’ no modelo de padaria
e está usando o padrão do observador para obter acesso ao campo e, em seguida, filtrar com base
no searchText.

A propriedade searchResults é o que iremos iterar em vez de ‘modelo’ ou ‘conteúdo’

  <script type="text/x-handlebars" id="bakery">
At {{#link-to 'goodies' name}}"{{name}}" {{/link-to}}
    <br/>
    {{input type='text' value=searchText}}
    <!-- outlet is where goodies will appear (render) -->
    {{outlet}}
  </script>

  <script type="text/x-handlebars" id="goodies">
    You see the following goodies:
    <ul>
    {{#each item in searchResults}}
      <li>{{item.name}}</li>
    {{/each}}
    </ul>
  </script>

Você configurou seu controlador para precisar do texto searchText da padaria e está observando as alterações
nele – bem como filtrando os resultados de ‘conteúdo’ em ‘searchResults’

searchResults começa como uma propriedade computada defaultingTo ‘content’

App.GoodiesController = Ember.ArrayController.extend({
  sortProperties:["name"],
  sortAscending: true,

  needs: "bakery",

  searchResults: Ember.computed.defaultTo("content"),

  filterItem: function (model) {
    searchInput = this.get('controllers.bakery.searchText')
    regexp = new RegExp(searchInput, "i");
    if(!searchInput || (searchInput && (0 == searchInput.length))) {
      return true
    } else if (-1 != model.name.search(regexp)) {
      return true
    } else {
      return false
    }
  },

  searchFilter: function() {
    searchInput = this.get('controllers.bakery.searchText')
    Ember.Logger.debug("someone is looking for " + this.get("controllers.bakery.searchText"))
    this.set('searchResults',this.get('content').filter(this.filterItem.bind(this)))
  }.observes("controllers.bakery.searchText"),
})

Isso lhe dá a capacidade de filtrar por resultados … mas agora a classificação não está funcionando.

É aqui que a propriedade ‘disabledContent’ de Ember.SortableMixin se torna útil.

alterando duas linhas para usar ‘disabledContent’ em vez de ‘content’, você acaba pesquisando e classificando

App.GoodiesController = Ember.ArrayController.extend({
  sortProperties:["name"],
  sortAscending: true,

  needs: "bakery",

  // search on the sorted 
  searchResults: Ember.computed.defaultTo("arrangedContent"),

  filterItem: function (model) {
    searchInput = this.get('controllers.bakery.searchText')
    regexp = new RegExp(searchInput, "i");
    if(!searchInput || (searchInput && (0 == searchInput.length))) {
      return true
    } else if (-1 != model.name.search(regexp)) {
      return true
    } else {
      return false
    }
  },

  searchFilter: function() {
    searchInput = this.get('controllers.bakery.searchText')
    Ember.Logger.debug("someone is looking for " + this.get("controllers.bakery.searchText"))

   // search on the sorted
    this.set('searchResults',this.get('arrangedContent').filter(this.filterItem.bind(this)))

  }.observes("controllers.bakery.searchText"),
})

Aí está – encadear a classificação e a pesquisa juntas.