-
-
Save Slava/5356921 to your computer and use it in GitHub Desktop.
Metrobone tries to convert your Backbone models to view-models using getViewModel method if such exists or toJSON otherwise.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Metrobone.js 0.0.2 | |
// | |
// J.R. Tipton @jrtipton | |
// Metrobone is a wimpy little utility library for | |
// making Backbone.js integrate with WinJS controls | |
// (for Windows 8 development) a little easier. | |
// | |
// Two basic ways to use this overly verbose little | |
// guy: | |
// | |
// { | |
// var proxy = new Metrobone.DataSource( myBackboneCollectionInstance ); | |
// var control = getMyListViewControl(); | |
// | |
// control.itemDataSource = proxy.datasource(); | |
// } | |
// | |
// Or: | |
// | |
// { | |
// getMyListViewControl().itemDataSource = Metrobone.proxyCollection( myBackboneCollectionInstance ); | |
// } | |
// | |
// Additions by Vyacheslav Kim @imslavko | |
// Metrobone converts your Backbone models to view-models. | |
// Models should implement method getViewModel otherwise toJSON is used. | |
// | |
(function () { | |
// Initial setup | |
// ------------- | |
// Save a reference to the global object. | |
var root = this; | |
// Save the previous value of the `Metrobone` variable | |
// in order to do `noConflict` properly. | |
var previousMetrobone = root.Metrobone; | |
// The top-level namespace. All public Metrobone classes | |
// and modules will dangle from this. | |
var Metrobone; | |
if (typeof exports !== 'undefined') { | |
Metrobone = exports; | |
} else { | |
Metrobone = root.Metrobone = {}; | |
} | |
Metrobone.VERSION = '0.0.2'; | |
// Metrobone requires Backbone. | |
var B = root.Backbone; | |
Metrobone.setBackbone = function (lib) { | |
B = lib; | |
} | |
Metrobone.noConflict = function () { | |
root.Metrobone = previousMetrobone; | |
return this; | |
} | |
// Helper function to convert Backbone model to view-model | |
var getViewModel = function (model) { | |
if (_.isFunction(model.getViewModel)) | |
return model.getViewModel(); | |
return model.toJSON(); | |
} | |
// Metrobone.DataSource | |
// -------------------- | |
// Acts as a proxy object for communicating the contents | |
// and changes of a Backbone Collection to listeners of | |
// WinJS data sources. A motivating example: if you have | |
// a Backbone Collection that you want to render into a | |
// WinJS.UI.ListView control, create a Metrobone.DataSource | |
// against the Backbone.Collection and it will reflect the | |
// contents (through its datasource() object). | |
// | |
// [ ListView ] <- [ Metrobone.DataSource ] <- [ Backbone.Collection ] | |
var DataSource = Metrobone.DataSource = function (collection, options) { | |
this.collection = collection; | |
this.list = new WinJS.Binding.List([]); | |
this.connected = false; | |
this.initialize.apply(this, arguments); | |
}; | |
_.extend(DataSource.prototype, { | |
initialize: function () { | |
}, | |
datasource: function () { | |
return this.connect(); | |
}, | |
connect: function () { | |
// When something in the Backbone collection changes, | |
// notify the WinJS object that knows how to signal | |
// the changes to any listeners. | |
this.collection.on('change', function (model) { | |
this.list.setAt(this.list.indexOf(getViewModel(model)), getViewModel(model)); | |
}, this); | |
// When something is added to the Backbone collection, | |
// add it to the WinJS object as well. | |
this.collection.on('add', function (model) { | |
this.list.push(getViewModel(model)); | |
}, this); | |
this.collection.on('remove', function (model) { | |
this.list.splice(this.list.indexOf(getViewModel(model)), 1); | |
}, this); | |
this.collection.on('reset', function (col) { | |
while (this.list.length) { | |
this.list.pop(); | |
} | |
this.collection.each(function (e) { | |
this.list.push(getViewModel(e)); | |
}, this); | |
}, this); | |
// Add the contents of the Backbone collection to the | |
// WinJS object now. | |
this.collection.each(function (e) { | |
this.list.push(getViewModel(e)); | |
}, this); | |
this.connected = true; | |
return this.list; | |
}, | |
disconnect: function () { | |
this.connected = false; | |
this.collection.off(null, null, this); | |
} | |
}); | |
Metrobone.proxyCollection = function (coll) { | |
var ds = new Metrobone.DataSource(coll); | |
return ds.datasource(); | |
} | |
}).call(this); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment