Making complex queries

app.js

// FIXTURES --------------------------------------

var articles = [
    { id: 1, title: "Web Application Theory", tags: ["javascript"], pubDate: new Date(2014,9,27), author: "Justin" },
    { id: 2, title: "Bithub.com - social community rewards", tags: ["bithub"], pubDate: new Date(2014,5,19), author: "Justin" },
    { id: 3, title: "CanJS 2.1 Release Notes", tags: ["canjs"], pubDate: new Date(2014,4,8), author: "Matthew" },
    { id: 4, title: "Bitovi's 2014 Employee Retreat: Las Vegas", tags: ["bitovi"], pubDate: new Date(2014,2,3), author: "Brian" },
    { id: 5, title: "JS and jQuery Essentials", tags: ["jquery", "javascript"], pubDate: new Date(2014,1,26), author: "Alexis" },
    { id: 6, title: "Data-Driven JavaScript Controls", tags: ["javascript"], pubDate: new Date(2014,1,18), author: "Brian" },
    { id: 7, title: "CanJS Infrastructure Improvements", tags: ["canjs"], pubDate: new Date(2014,1,5), author: "justin" },
    { id: 8, title: "CanJS US Meetup Sponsors", tags: ["canjs"], pubDate: new Date(2013,9,27), author: "JoshD" },
    { id: 9, title: "CanJS US Meetups", tags: ["canjs"], pubDate: new Date(2013,9,1), author: "Justin" },
    { id: 10, title: "JavaScriptMVC's development process", tags: ["jmvc"], pubDate: new Date(2013,8,13), author: "Justin" },
    { id: 11, title: "JavaScriptMVC 3.3 Released!", tags: ["jmvc"], pubDate: new Date(2013,8,3), author: "Justin" },
    { id: 12, title: "The Coffee Shop User Experience Lab", tags: ["soft"], pubDate: new Date(2013,4,24), author: "Tom" },
];

can.fixture({
    "GET /articles": function( request, response ) {
        var params = request.data;

        var result = articles;

        if( params.tags ) {
            result = _.filter( result, function( el ) {
             return _.intersection( el.tags, params.tags ).length
            });
        }

        if( params.author ) {
            result = _.filter( result, function( el ) {
                return el.author == params.author
            });
        }

        if( params.published ) {
            result = _.filter( result, function( el ) {
                return el.pubDate < new Date();
            });
        }

        return result;
    }
});

var availableAuthors = _.reduce( articles, function( result, article ) {
    return _.union( result, [article.author] );
});

var availableTags = _.reduce( articles, function( result, article ) {
    return _.union( result, article.tags );
});


// MODELS ----------------------------------------

var Article = can.Model.extend({
    findAll: 'GET /articles'
}, {});


// ---

can.Mustache.registerHelper('toDate', function( arg ) {
    return arg.toDateString();
});


// COMPONENTS ------------------------------------

// select field
can.Component.extend({
    tag: "select-field",
    template: can.view('select-field-template'),
    scope: {
        caption: '@',
        name: '@',
        multiple: '@',
        nullable: '@'
    }
});

// checkbox field
can.Component.extend({
    tag: "checkbox-field",
    template: can.view('checkbox-field-template'),
    scope: {
        caption: '@',
        name: '@',
        value: '@'
    }
});


// INIT APP --------------------------------------

var state = new can.Map({});

var fetchAndRenderArticles = function( params ) {
    console.log( "Params >>>", params );

    Article.findAll( params, function( data ) {
        console.log( "Result <<<", data.attr() );

        $('#results').html(
            can.view("results-list-template")({articles: data.attr()})
        );
    });
}

state.bind('change', function(ev, attr, how, newVal, oldVal) {
    // sanitize params
    var params = _.reduce( state.attr(), function(result, v, k) {
        if( v == true || !_.isEmpty(v) ) { result[k] = v; }

        return result;
    }, {});

    fetchAndRenderArticles( params );
});

// init can.Components
$("#filterbar").append(
    can.mustache(
        "<select-field caption='Author' name='author' state='currentState.author' options='authors' nullable='true'></select-field>")({
            authors: availableAuthors,
            currentState: state
        })
);

$("#filterbar").append(
    can.mustache("<select-field caption='Tags' name='tags' state='currentState.tags'  options='tags' multiple='true'></select-field>")({
            tags: availableTags,
            currentState: state
        })
);

$("#filterbar").append(
    can.mustache("<checkbox-field caption='Published' name='published' state='currentState.published'></checkbox-field>")({
            currentState: state
        })
);

// populate list on init
fetchAndRenderArticles( state.attr() );

diagram.png

index.html

<html>
  <head>
    <title>Making advanced queries with can.Model</title>
    <style type="text/css" media="screen">
      body {
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
      }
      #filterbar {
        background-color: #eee;
        float: left;
        width: 180px;
      }
      #filterbar fieldset {
        border: 0px;
      }
      #filterbar select[multiple] {
        height: 130px;
        width: 120px;
      }
      #results {
        float: left;
        margin-left: 20px;
      }
      #results li {
        list-style-type: none;
        margin: 15px 0px;
      }
      #results small {
        color: grey;
      }

    </style>
  </head>
  <body>

    <!-- FILTERBAR CONTAINER -->
    <div id="filterbar"></div>

    <!-- RESULTS CONTAINER -->
    <div id="results"></div>

    <!-- SELECT FIELD TEMPLATE -->
    <script id="select-field-template" type="text/mustache">
      <fieldset>
        <label for="{{name}}">{{caption}}:</label><br>
        <select name="{{name}}" can-value="state"  {{#if multiple}}multiple="true"{{/if}}>
          {{#if nullable}}<option value="">--</option>{{/if}}
          {{#options}}
          <option value="{{.}}">{{.}}</option>
          {{/each}}
        </select>
      </fieldset>
    </script>

    <!-- CHECKBOX FIELD TEMPLATE -->
    <script id="checkbox-field-template" type="text/mustache">
      <fieldset>
        <input type="checkbox" name="{{name}}" can-value="state" value="published" /><label for="{{name}}">{{caption}}</label>
      </fieldset>
    </script>

    <!-- RESULTS LIST -->
    <script id="results-list-template" type="text/mustache">
      <ul>
        {{#articles}}
        <li>{{id}}. [ {{tags}} ] {{title}}<br><small>{{author}} @ {{toDate pubDate}}</small></li>
        {{/each}}
      </ul>
    </script>


    <!-- LOAD SCRIPTS -->
    <script src="jquery.min.js"></script>
    <script src="can.custom.js"></script>
    <script src="lodash.min.js"></script>
    <script src="app.js"></script>

  </body>
</html>

Don't forget to download extern libraries to get this working, (at the bottom of index.html):

• jquery
• canjs
• lodash