Problem of search the folder Items

Questions
1

Hello,

I have multiple folders with corresponding items, in that having search option. If I clicked the checkbox on folder A in the search option, it will show their items (eg. consider it having 4 items) and If I click the another checkbox of folder B (eg. consider it having 4 items) along with the folder A, it will show totally 8 items of folder A and folder B. Now When I remove the folder A or folder B from the checkbox, it still showing the 8 items. But I need only the corresponding folder items selected.

Here are my code:

Checkbox: Core.component.Checkbox.extend({
    click: function () {
        console.log(this);
        var nav = this.get("controller").get('selectedNavigator');
        var ret = this._super.apply(this, arguments);
        Ember.run.schedule('sync', this, function () {
            Ember.run.schedule('render', this, function () {
                var states = this.get('parentView.itemStates');
                var values =  Object.keys(states).filter(function (key) {
                    return states[key];
                });

                if (values.length === 0) {
                    Core.Action('core:contentHome', {});
                } else {
                    this.set('parentView.model.values',values);
                    nav.publish();
                }

            });
        });
        return ret;
    }
})

Please provide the suggestion for this. I’m using Ember 1.4.0. Thanks in advance.

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