vadimdemedes

var view = new MyView({ container: 'div.some-container' });

view.on('render', function(){
  view.bindings.coolButton.addClass('active');
		
  view.bindings.pageContainer.css('display', 'block');
});

view.render();

vadimdemedes

var MyView = Chute.View.extend({
  bindings: {
    'coolButton': 'a.buttonInsideView',
    'commentsNumber': 'span.comments-number',
		
    global: {
      'pageContainer': 'div.container',
      'body': 'body'
    }
  }

vadimdemedes

var $body = $('body'),
    someContainer = $('div.some-container');
  
body.css('background', '#fff');

someContainer.hide();
someContainer.remove();

vadimdemedes

var MyView = Chute.View.extend({
  handlers: {
    'click a.someButton': 'doSomething',
    'click a.anotherButton': function(e){
      // event fired
    }
  },
	
  doSomething: function(e){
    var $el = $(e.target); // getting a reference to an element, event was fired on

vadimdemedes

var MyView = Chute.View.extend({
  dependencies: {
    js: ['js/script.js', 'js/depends_on_script.js', 'js/other.js'],
    css: ['css/styles.css']
  }
});

vadimdemedes

var MyView = Chute.View.extend({
  dependencies: ['js/script.js', 'js/depends_on_script.js', 'css/styles.css', 'js/other.js']
});

vadimdemedes

<script>
  Chute.ready(function(){
    // View and API components are loaded
  });
</script>

vadimdemedes

<script src="//s3.amazonaws.com/cdn.getchute.com/chute-js/v1/chute.min.js" data-load="view,api"></script>

vadimdemedes

<script src="//cdn.getchute.com/v3/chute.min.js" data-load="view"></script>
<style> /* Some basic styling for a grid */
div.assets {
  overflow:hidden;
}

div.asset {
	float:left;
	margin:10px;
}

vadimdemedes

<script src="//cdn.getchute.com/v3/chute.min.js" data-load="view"></script>
<!-- Template for a container element -->
<script class="container-template" type="application/x-template">
  <div class="assets"></div>
</script>
<!-- Template for a single image -->
<script class="item-template" type="application/x-template">
	<div class="asset">
		<img src="{{ asset.url }}/w/200">
	</div>