Skip to content

Instantly share code, notes, and snippets.

@jakewhiteley

jakewhiteley/app.js

Created July 21, 2015 21:07
Show Gist options
  • Save jakewhiteley/4417c4206d7be12fb462 to your computer and use it in GitHub Desktop.
Save jakewhiteley/4417c4206d7be12fb462 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
app.js
var AppPath = '/teimr/',
App = blocks.Application({
history: 'pushState'
});
App.View('Navigation', {
options: {
url: AppPath + 'views/navigation.html',
},
// populates the side nav with tags
sideNav: blocks.observable([1, 2, 3]),
ready: function() {
console.log('nav loaded')
}
});
App.View('Main', {
options: {
url: AppPath + 'views/main.html',
},
ready: function() {
console.log($('ul.tabs'), 'main loaded')
}
});
@jakewhiteley
Copy link
Author

index.html is as follows:

<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" defer></script>
        <script src="/teimr/app.js" defer></script>

    <body>

        <aside data-query="view(Navigation)"></aside>
        <main data-query="view(Main)"></main>



        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js" defer></script>
        <link rel="stylesheet" type="text/css" href="/teimr/style.css">
        <script>
        // runs materialize functions for navigation
        $( document ).on('ajaxComplete.materialize', function() {
            if ($(".button-collapse").length > 0) {
                $(".button-collapse").sideNav();
                $('ul.tabs').tabs();
                console.log('ajaxComplete event fired')
                $(this).off('ajaxComplete.materialize');             
            }
        });
        </script>

The issue is that neither ready method has access to the rendered DOM of the template associated with it's view.

@jakewhiteley
Copy link
Author

Navigation.html:

<div class="row">
    <div class="col s12">
      <ul class="tabs">
        <li class="tab col s3"><a href="#test1">Test 1</a></li>
        <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
        <li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
        <li class="tab col s3"><a href="#test4">Test 4</a></li>
      </ul>
    </div>
    <div id="test1" class="col s12">Test 1</div>
    <div id="test2" class="col s12">Test 2</div>
    <div id="test3" class="col s12">Test 3</div>
    <div id="test4" class="col s12">Test 4</div>
  </div>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment