Ember isInViewport

Appearing now

by mgrassotti

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.2/ember.min.js"></script>
<script src="https://raw.github.com/cmoel/tom_dale_ember_screencast/master/js/libs/ember-data.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"></script>
<script type="text/x-handlebars">
    {{outlet}}
  </script>
  <script type="text/x-handlebars" id="post">
    <tr><td>
      {{#linkTo 'post' this}}{{title}} <small class="muted">id: {{id}} | visible: {{isVisible}} {{this}}</small>{{/linkTo}}
    </td></tr>
  </script>
  <script type="text/x-handlebars" id="posts">
    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span3">
          <table class="table">
            <thead>
              <tr><th>All Posts</th></tr>
            </thead>
            {{each model itemViewClass="App.PostView"}}
          </table>
        </div>
        <div class="span9">
          {{outlet}}
        </div>
      </div>
    </div>
  </script>

CSS

/* Put your CSS here */
html, body { margin: 20px; }
.active { font-weight: bold; }

JavaScript

App = Ember.Application.create({});
App.Store = DS.Store.extend({
  revision: 12,
  adapter: 'DS.FixtureAdapter'
});
App.Router.map(function() {
  this.resource('posts', function() {
    this.resource('post', { path: ':post_id' });
  });
  this.resource('about');
});
App.IndexRoute = Ember.Route.extend({
  redirect: function() {
    this.transitionTo('posts');
  }
});
App.PostsRoute = Ember.Route.extend({
  model: function() {
    return App.Post.find();
  }
});
App.PostsController = Ember.ArrayController.extend({
    itemControllerClass: 'post'
});
App.PostController = Ember.ObjectController.extend({
  isVisible: false,
  edit: function() {
    this.set('isEditing', true);
  },
  doneEditing: function (){
    this.set('isEditing', false);
  }
});
App.PostView = Ember.View.extend({
    templateName: 'post',
    didInsertElement: function() {
        console.log("hello");
    },
    isInViewport: function() {
	  $window				= $(window),
	  viewportTop			= $window.scrollTop(),
	  viewportBottom		= viewportTop + $w.height(),
	  top			        = this.$().offset().top,
	  bottom			    = top + this.$().height(),
	  return ((bottom <= viewportBottom) && (top >= viewportTop));
    }
    
});
App.Post = DS.Model.extend({
  title: DS.attr('string'),
});
App.Post.FIXTURES = [];

for (num = 5; num <= 100; ++num) {
    console.log(num);
    title = "Post " + num;
    App.Post.FIXTURES.push({id: num, title: title});
}