{"id":17772551,"url":"https://github.com/jamesplease/marionette.sliding-view","last_synced_at":"2025-12-12T04:22:14.433Z","repository":{"id":27461104,"uuid":"30940099","full_name":"jamesplease/marionette.sliding-view","owner":"jamesplease","description":"A sliding Collection View in Marionette.","archived":false,"fork":false,"pushed_at":"2015-06-14T17:41:30.000Z","size":735,"stargazers_count":16,"open_issues_count":9,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-10T06:38:19.861Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jamesplease.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-02-17T22:00:59.000Z","updated_at":"2020-03-23T19:32:14.000Z","dependencies_parsed_at":"2022-09-14T03:40:40.116Z","dependency_job_id":null,"html_url":"https://github.com/jamesplease/marionette.sliding-view","commit_stats":null,"previous_names":["jmeas/marionette.sliding-view"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesplease%2Fmarionette.sliding-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesplease%2Fmarionette.sliding-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesplease%2Fmarionette.sliding-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesplease%2Fmarionette.sliding-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jamesplease","download_url":"https://codeload.github.com/jamesplease/marionette.sliding-view/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243707298,"owners_count":20334614,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-26T21:39:44.410Z","updated_at":"2025-12-12T04:22:14.402Z","avatar_url":"https://github.com/jamesplease.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# marionette.sliding-view\n[![Travis build status](http://img.shields.io/travis/jmeas/marionette.sliding-view.svg?style=flat)](https://travis-ci.org/jmeas/marionette.sliding-view)\n[![Code Climate](https://codeclimate.com/github/jmeas/marionette.sliding-view/badges/gpa.svg)](https://codeclimate.com/github/jmeas/marionette.sliding-view)\n[![Test Coverage](https://codeclimate.com/github/jmeas/marionette.sliding-view/badges/coverage.svg)](https://codeclimate.com/github/jmeas/marionette.sliding-view)\n[![Dependency Status](https://david-dm.org/jmeas/marionette.sliding-view.svg)](https://david-dm.org/jmeas/marionette.sliding-view)\n[![devDependency Status](https://david-dm.org/jmeas/marionette.sliding-view/dev-status.svg)](https://david-dm.org/jmeas/marionette.sliding-view#info=devDependencies)\n\nA sliding Collection View in Marionette.\n\n[**View example.**](http://jmeas.github.io/marionette.sliding-view/examples/simple-list.html)\n\n### Motivation\n\nSome Collections contain many, many items, and rendering them all at once with a CollectionView\ncan take a very long time. A 'sliding' CollectionView only displays some of the models at once (typically, only those\nvisible), giving you fast load times even as the number of items goes into the tens of thousands.\n\n### Getting Started\n\nThis is a more complex view class. Accordingly, it may take some time to fully understand the API it provides.\nOnce you've got it down, though, you should find that it's a really powerful tool.\n\n#### Concepts\n\nUnderstanding a few core concepts will help you to use the SlidingView.\n\n##### Reference Collection\n\nA SlidingView has two collections: `collection` and `referenceCollection`. The `collection`\nrepresents only the models that are *currently* being displayed. The `referenceCollection` is the\nfull list of models that the SlidingView represents.\n\n##### Update Event\n\nThe SlidingView determines if it needs to change the models that are displayed whenever the \"update event\"\noccurs. By default, the \"update event\" is the scroll event on the SlidingView's element.\n\nAlthough in most cases the update event is typically a scroll event, it could be anything.\n\n##### Lower and Upper Boundaries\n\nThe SlidingView has two internal properties, called the `lowerBound` and `upperBound`. These\nare two properties that can be used to determine which models from the reference collection\nshould be displayed at any given time.\n\nThere are two hooks that are used to set the boundaries, and they are called everytime that\nthe update event occurs.\n\nIn the simplest case, the boundaries will be indices that represent which indices to `slice`\nthe `referenceCollection` at.\n\n### API\n\n##### `constructor( [options] )`\n\nA `CollectionView` typically receives a `collection` as an option. SlidingView is different in that you\n**do not** pass in a `collection`. Instead, pass it in as the option `referenceCollection`. While the\n`referenceCollection` represents the full list of models, the `collection` attribute will be created for\nyou, and will be kept up-to-date with the current models that are displayed in the View.\n\nYou can either pass the `referenceCollection` as an option, or specify it on the prototype.\n\n##### `collectionClass`\n\nThe Class of Collection that the SlidingView will instantiate to serve as its Collection. The default\nvalue is just `Backbone.Collection`, and, generally, you won't need to override this. Keep in mind that the\nmodels in this collection instance are the same models that exist in the `referenceCollection`.\n\n##### `registerUpdateEvent()`\n\nA hook that lets you register when to call the `onUpdateEvent` method. By default,\nthe SlidingView listens to `scroll` events on its own element. By overriding this,\nyou could make it update its collection when another element (like a parent) is scrolled,\nor any time any event occurs.\n\nWhen overriding this method, use the `onUpdateEvent` method as your callback for the event.\n\n```js\nvar MySlidingView = Mn.SlidingView.extend({\n\n  // Update whenever a model changes\n  registerUpdateEvent: function() {\n    var self = this;\n    this.listenTo(someModel, 'change', function() {\n      self.onUpdateEvent();\n    });\n  }\n});\n```\n\n##### `onUpdateEvent()`\n\nA callback that is executed every time the registered update event happens. The purpose\nof this callback is to throttle the *true* callback to the event, which is\n`throttledUpdateHandler`.\n\nThe default behavior is to throttle the `throttledUpdateHandler` method using the `throttle`\nmethod on the SlidingView.\n\nFor a big performance boost, you are highly encouraged to override this method to use\n`requestAnimationFrame`.\n\n```js\nvar MySlidingView = Mn.SlidingView.extend({\n\n  // Use requestAnimationFrame for a big performance boost!\n  onUpdateEvent: function() {\n    requestAnimationFrame(this.throttledUpdateHandler);\n  }\n});\n```\n\n##### `throttledUpdateHandler()`\n\nThis is the method that contains all of the logic for the intelligent SlidingView updates. It is\nnot recommended that you override this method. You only need to do anything with it when defining\na custom `onUpdateEvent` method.\n\n##### `throttle( fn )`\n\nIf you're not using `requestAnimationFrame` (you should be!), then you can specify how\nto throttle `fn` here. The default implementation is to use `_.throttle` at 60 fps.\n\nNote that if you **are** using `requestAnimationFrame`, then you can ignore this method\nentirely.\n\n##### `pruneCollection(lowerBound, upperBound)`\n\nUse the values of `lowerBound` and `upperBound` to calculate a list of models to be\n`set` on the SlidingView's `collection`. By default, all of the models from\n`referenceCollection` are returned.\n\nIf your upper and lower boundaries reference indices, then you could `slice` your collection\nto return just the models within those indices.\n\n```js\nvar MySlidingView = Mn.SlidingView.extend({\n  pruneCollection: function(lowerBound, upperBound) {\n    return this.referenceCollection.slice(lowerBound, upperBound)\n  }\n});\n```\n\n##### `initialLowerBound`\n\nThe initial lower boundary for the SlidingView. It can be a flat value or a function.\n\n```js\nvar MySlidingView = Mn.SlidingView.extend({\n  initialLowerBound: 3\n});\n```\n\n##### `initialUpperBound( initialLowerBound )`\n\nThe initial upper boundary for the SlidingView. It can be a flat value or a function. When a\nfunction is provided, it will be passed the initial lower boundary.\n\n```js\nvar MySlidingView = Mn.SlidingView.extend({\n  initialLowerBound: function(initialLowerBound) {\n    return initialLowerBound + 5;\n  }\n});\n```\n\n##### `getLowerBound()`\n\nA function that is called each time the update event occurs. Within this method\nyou should calculate the new value of the `lowerBound` and return it.\n\n##### `getUpperBound( lowerBound )`\n\nSimilar to the above, but for the upper boundary. It is passed the `lowerBound` that\nwas just computed, if you need to use that as a reference.\n\n##### `compareBoundaries( a, b )`\n\nThis method is used to determine whether or not two boundaries are equal. The default implementation is\nsimply `a === b`, which works if you're using simple boundaries, like numbers or strings. Sometimes, though,\nmore complex charts or grids require returning JavaScript Objects as boundaries. This hook allows you to\ndefine how those Objects should be compared.\n\n##### `isSmallChange( boundaries )`\n\n`isSmallChange` determines whether the render will occur instantly or if it will be delayed. The delay prevents too many\nitems from being rendered at a single time, which greatly improves performance.\n\n`isSmallChange` can be provided as a flat value or as a function. When a function is provided, it is passed an object with\nfour properties:\n\n- `oldLowerBound` - The previous lower boundary\n- `oldUpperBound` - The previous upper boundary\n- `lowerBound` - The new lower boundary\n- `upperBound` - The new upper boundary\n\nIf your boundaries are indices, you might implement an `isSmallChange` method like so:\n\n```js\nisSmallChange: function(bounds) {\n  var lowerBoundDiff = Math.abs(bounds.oldLowerBound - bounds.lowerBound);\n  var upperBoundDiff = Math.abs(bounds.oldUpperBound - bounds.upperBound);\n\n  // This means that anytime less than 6 items are added/removed we will render\n  // immediately rather than waiting 50ms\n  return lowerBoundDiff + upperBoundDiff \u003c 6;\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamesplease%2Fmarionette.sliding-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjamesplease%2Fmarionette.sliding-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamesplease%2Fmarionette.sliding-view/lists"}