Via is a small library that allows you to load content on to a page dynamically
##Demo
git clone https://github.com/abdi0987/ViaJS.git
Link to the app.js file
<script src='lib/app.js'></script>
###Example
Specifiy were to load the content
<div class="container" via-views></div>
add via-views attribute to your div element to specifiy where to load the content
Specifiy your views url and a defaultView if the user enters an invalid hashtag url.
Then call the init function and pass it your views
var views = {
home: [{
selector: "#title",
templateUrl: 'views/index-title.php'
}, {
selector: "#content",
templateUrl: 'views/index-content.php'
},
],
about: [{
selector: "#title",
templateUrl: 'views/about-title.php'
}, {
selector: "#content",
templateUrl: 'views/about-content.php'
},
],
contact: [{
selector: "#title",
templateUrl: 'views/contact-title.php'
// }, {
// selector: "#content",
// templateUrl: 'views/contact-content.php'
},
],
defaultView: {
view: 'home'
}
};
var via = new Via();
via.init(views);
now you can use the short version:
new Via(views);
and also
Then use an a tag
<ul class="nav navbar-nav">
<li class=""><a via-link href="home">Home</a></li>
<li><a via-link href="about">About</a></li>
<li><a via-link href="contact">Contact</a></li>
</ul>
Remeber for the href attribute enter the same name you gave the views object and add via-link attribute to every tag you are using to load your content