Looking at RivetsJS pull request 186 one sees that you can now build custom tags (component/ reusable views). But I haven't seen any documentation that shows a full example and how it works.
I tried the following, but nothing happens when I load the page. Any help is appreciated
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<script type="text/javascript" src="rivets.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="cltemplate" id="auctionTemplate">
<section id="auction">
<h1>{auction.title}</h1>
<aside rv-show='auction.remaining'>
<h4>Hurry up!<h4>
<p>This auction is ending in { auction.remaining }.</p>
</aside>
<button rv-on-click="controller.bid" rv-disabled="auction.disabled">Place a bid</button>
</section>
</script>
<script type="text/javascript">
rivets.components.auction = {
attributes: [],
build: function() {
return $('#auctionTemplate').text();
}
}
var auctionModel = {title: "Selling A House", remaining: 20, disabled: false};
var controller = function(auction){
this.auction = auction;
this.bid = function() {
console.log('you bid...');
auction.remaining -= 10;
console.log('only ' + auction.remaining + ' remaining' );
if(auction.remaining - 10 < 0) {
auction.disabled = true;
}
};
return this;
};
</script>
</head>
<body>
<rv-auction auction="auction" controller="controller"></rv-auction>
</body>
</html>
The
buildmethod inrivets.components.auctionshould return a DOM element, not a string.Like
$('#auctionTemplate').get(0);