Problem of search the folder Items

Questions
2

Hi @boo, it’s difficult to help with this and the other similar questions you’ve asked, for several reasons. The first reason is that Ember 1.4 is so old that most of us have only fuzzy memories of working with it. The second reason is that even for the 1.4 era, this code is not idiomatic. The third reason is that this code is depending on unusual, custom things that we can’t see directly (for example: I have no idea what Core.Action('core:contentHome', {}) or nav.publish() actually do.

Here are some ideas that may help you refactor this example to be clearer and simpler:

  • I don’t see any reason to extend Core.component.Checkbox and directly handle clicks. Instead, you would bind a value to a checkbox and only react to changes in the value, not directly react to clicks.
  • the calls to Ember.run.schedule are almost certainly fragile and buggy. Manually scheduling like this should be a rare thing to do, it’s definitely not needed to build a UI that just re-renders correctly when the user clicks something.

I put together a demo that shows how to apply a dynamic list of checkboxes as filters for a list of files. Future readers, please don’t use this code, it’s doing things that only worked in very old Ember:

<!DOCTYPE html>
<html>
  <body>
    <!-- "bower install ember@1.4" -->
    <script src="./bower_components/jquery/jquery.js"></script>
    <script src="./bower_components/handlebars/handlebars.js"></script>
    <script src="./bower_components/ember/ember.js"></script>

    <script type="text/x-handlebars">
      {{my-demo}}
    </script>

    <script type="text/x-handlebars" id="components/my-demo" >
      {{#each filters}}
        <label>{{input type="checkbox" checked=selected}} {{label}}</label>
      {{/each}}

      {{#each displayedFiles}}
        <div>{{name}}</div>
      {{/each}}
    </script>

    <script>
      window.App = Ember.Application.create();

      App.MyDemoComponent = Ember.Component.extend({
        init: function() {
          this._super();

          this.set('files', [
            { name: "one.jpg" },
            { name: "two.pdf"},
            { name: "three.jpg" },
            { name: "four.pdf" }
          ]);

          this.set('filters', [
            { label: 'Show PDFs', selected: true, test: function(file) { return /\.pdf$/.test(file.name); } },
            { label: 'Show JPGs', selected: true, test: function(file) { return /\.jpg$/.test(file.name); } },
          ]);
        },

        displayedFiles: Ember.computed('files.[]', 'filters.@each.selected', function() {
          let filters = this.get('filters').filter(function(filter){ return filter.selected; });
          return this.get('files').filter(function(file) {
            return filters.find(function(filter){ return filter.test(file) });
          })
        })
      });

    </script>
  </body>
</html>
3 Likes
Check and uncheck the checkbox needs to reload the search item