jakewhiteley/jsblocks.js

## jsblocks.js
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css">

        <script src="http://jsblocks.com/jsblocks/blocks.js"></script>
        <script>
            var App = blocks.Application({
                history: 'pushState'
            });

            var Article = App.Model({
                content: App.Property({
                    defaultValue: 'no content'
                }),

                title: App.Property({
                    defaultValue: 'No Title'
                }),

                thumbnail: App.Property({
                    defaultValue: 'https://i.ytimg.com/vi/ZTidn2dBYbY/0.jpg'
                })
            });

            var Articles = App.Collection(Article, {
                // place your collection methods here
                options: {
                    read: {
                        url: 'articles.json'
                    }
                }
            });

        /**
         * Views
         */
        App.View('Navigation', {
            options: {
                url: 'views/navigation.html',
            },

            // lets try with an array
            ar1: ['yo','second']
        });

        App.View('Main', {

        });

        App.View('Main', 'List', {
            options: {
                url: 'views/list.html',
                route: 'jsblocks/'
            },

            init: function () {
                this.articles.read();
            },

            areaTitle: 'Browse Videos',

            filterValue: blocks.observable(''),

            articles: Articles().extend('filter', function (value) {
                var filter = this.filterValue();
                return !filter || value.title().toLowerCase().indexOf(filter.toLowerCase()) != -1;
            }),

            /**
             * resets the searchbar value
             */
            clearSearch: function () {
                this.filterValue('')
            }
        });

        App.View('Main', 'ViewTag', {
             options: {
                route: blocks.route('jsblocks/tag/{{type}}')
            },
            routed: function (params) {
                console.log(params)
            }
        });
        </script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <body>
        <!-- Navigation -->
        <aside data-query="view(Navigation)"></aside>

        <div data-query="view(Main)">
            <section data-query="view(List)"></section>
            <main>
                <a href="#" data-query="navigateTo(ViewTag, {type: 'dog'})">Contact Us</a>
            <div data-query"view(ViewTag)">
                <p>{{route.type}}</p>
            </div>
            </main>
        </div>

<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
<script>
$( document ).on('ajaxComplete', function() {
      $(".button-collapse").sideNav();
});
</script>
	<html>
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css">

	<script src="http://jsblocks.com/jsblocks/blocks.js"></script>
	<script>
	var App = blocks.Application({
	history: 'pushState'
	});

	var Article = App.Model({
	content: App.Property({
	defaultValue: 'no content'
	}),

	title: App.Property({
	defaultValue: 'No Title'
	}),

	thumbnail: App.Property({
	defaultValue: 'https://i.ytimg.com/vi/ZTidn2dBYbY/0.jpg'
	})
	});

	var Articles = App.Collection(Article, {
	// place your collection methods here
	options: {
	read: {
	url: 'articles.json'
	}
	}
	});

	/**
	* Views
	*/
	App.View('Navigation', {
	options: {
	url: 'views/navigation.html',
	},

	// lets try with an array
	ar1: ['yo','second']
	});

	App.View('Main', {

	});

	App.View('Main', 'List', {
	options: {
	url: 'views/list.html',
	route: 'jsblocks/'
	},

	init: function () {
	this.articles.read();
	},

	areaTitle: 'Browse Videos',

	filterValue: blocks.observable(''),

	articles: Articles().extend('filter', function (value) {
	var filter = this.filterValue();
	return !filter \|\| value.title().toLowerCase().indexOf(filter.toLowerCase()) != -1;
	}),

	/**
	* resets the searchbar value
	*/
	clearSearch: function () {
	this.filterValue('')
	}
	});

	App.View('Main', 'ViewTag', {
	options: {
	route: blocks.route('jsblocks/tag/{{type}}')
	},
	routed: function (params) {
	console.log(params)
	}
	});
	</script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

	<body>
	<!-- Navigation -->
	<aside data-query="view(Navigation)"></aside>

	<div data-query="view(Main)">
	<section data-query="view(List)"></section>
	<main>
	<a href="#" data-query="navigateTo(ViewTag, {type: 'dog'})">Contact Us</a>
	<div data-query"view(ViewTag)">
	<p>{{route.type}}</p>
	</div>
	</main>
	</div>

	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
	<script>
	$( document ).on('ajaxComplete', function() {
	$(".button-collapse").sideNav();
	});
	</script>