# widget.valuefilter.js

- Jump To … +
  backend.dataproxy.js backend.memory.js ecma-fixes.js model.js view.flot.js view.graph.js view.grid.js view.map.js view.multiview.js view.slickgrid.js view.timeline.js widget.facetviewer.js widget.fields.js widget.filtereditor.js widget.pager.js widget.queryeditor.js widget.valuefilter.js

- # widget.valuefilter.js

- ¶

      /*jshint multistr:true */

      this.recline = this.recline || {};
      this.recline.View = this.recline.View || {};

      (function($, my) {
        "use strict";

      my.ValueFilter = Backbone.View.extend({
        className: 'recline-filter-editor well',
        template: ' \
          <div class="filters"> \
            <h3>Filters</h3> \
            <button class="btn js-add-filter add-filter">Add filter</button> \
            <form class="form-stacked js-add" style="display: none;"> \
              <fieldset> \
                <label>Field</label> \
                <select class="fields form-control"> \
                  {{#fields}} \
                  <option value="{{id}}">{{label}}</option> \
                  {{/fields}} \
                </select> \
                <button type="submit" class="btn">Add</button> \
              </fieldset> \
            </form> \
            <form class="form-stacked js-edit"> \
              {{#filters}} \
                {{{filterRender}}} \
              {{/filters}} \
              {{#filters.length}} \
              <button type="submit" class="btn update-filter">Update</button> \
              {{/filters.length}} \
            </form> \
          </div> \
        ',
        filterTemplates: {
          term: ' \
            <div class="filter-{{type}} filter"> \
              <fieldset> \
                {{field}} \
                <a class="js-remove-filter" href="#" title="Remove this filter" data-filter-id="{{id}}">&times;</a> \
                <input type="text" value="{{term}}" name="term" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \
              </fieldset> \
            </div> \
          '
        },
        events: {
          'click .js-remove-filter': 'onRemoveFilter',
          'click .js-add-filter': 'onAddFilterShow',
          'submit form.js-edit': 'onTermFiltersUpdate',
          'submit form.js-add': 'onAddFilter'
        },
        initialize: function() {
          _.bindAll(this, 'render');
          this.listenTo(this.model.fields, 'all', this.render);
          this.listenTo(this.model.queryState, 'change change:filters:new-blank', this.render);
          this.render();
        },
        render: function() {
          var self = this;
          var tmplData = $.extend(true, {}, this.model.queryState.toJSON());

- ¶

  we will use idx in list as the id …

          tmplData.filters = _.map(tmplData.filters, function(filter, idx) {
            filter.id = idx;
            return filter;
          });
          tmplData.fields = this.model.fields.toJSON();
          tmplData.filterRender = function() {
            return Mustache.render(self.filterTemplates.term, this);
          };
          var out = Mustache.render(this.template, tmplData);
          this.$el.html(out);
        },
        updateFilter: function(input) {
          var self = this;
          var filters = self.model.queryState.get('filters');
          var $input = $(input);
          var filterIndex = parseInt($input.attr('data-filter-id'), 10);
          var value = $input.val();
          filters[filterIndex].term = value;
        },
        onAddFilterShow: function(e) {
          e.preventDefault();
          var $target = $(e.target);
          $target.hide();
          this.$el.find('form.js-add').show();
        },
        onAddFilter: function(e) {
          e.preventDefault();
          var $target = $(e.target);
          $target.hide();
          var field = $target.find('select.fields').val();
          this.model.queryState.addFilter({type: 'term', field: field});
        },
        onRemoveFilter: function(e) {
          e.preventDefault();
          var $target = $(e.target);
          var filterId = $target.attr('data-filter-id');
          this.model.queryState.removeFilter(filterId);
        },
        onTermFiltersUpdate: function(e) {
          var self = this;
          e.preventDefault();
          var filters = self.model.queryState.get('filters');
          var $form = $(e.target);
          _.each($form.find('input'), function(input) {
            self.updateFilter(input);
          });
          self.model.queryState.set({filters: filters, from: 0});
          self.model.queryState.trigger('change');
        }
      });

      })(jQuery, recline.View);