Ok
here is an idea of how such a
layer of platform abstraction/decoupling
could look like. Its intention is to pre-configure certain parts of Ember to let it better fit into / adapt to the platform it is running on.
The following code fragment represents the decoupling of DOM and jQuery calls inside Ember. The sample provided is not complete, it only covers the DOM innerHtml setter and jQuery.appendTo(). There are more DOM manipulation around that needed to be taken into account. The code fragment needs to be added after the Ember object is created and of course before any of the wrapped calls are used by Ember). A Windows 8 Store App configuration of the Ember.Decouple object is shown at the end of this post.
/**
Layer of abstraction/decoupling to wrap calls to the DOM and jQuery.
The "Ember.Decouple" allows wrapping calls to DOM.innerHtml
and jQuery.appendTo() by some platform specific code.
For instance Windows 8 store applications required that calls to
innerHtml are executed as unsafe code if the content being assigned
to the innerHtml property contains <script> elements.
The "decoupling" can be configured by creating a javascript
object named PlatformDecouple. This object must be created prior to loading/parsing Ember.js
*/
(function () {
if ('undefined' !== typeof PlatformDecouple) {
Ember.Decouple = PlatformDecouple;
}
else {
Ember.Decouple = {};
}
Ember.Decouple.DOM = Ember.Decouple.DOM || {};
Ember.Decouple.DOM.innerHtml = Ember.Decouple.DOM.innerHtml || function (element, content) { element.innerHTML = content; };
// ... more DOM decoupling
Ember.Decouple.jQuery = Ember.Decouple.jQuery || {};
Ember.Decouple.jQuery.appendTo = Ember.Decouple.jQuery.appendTo || function (elem, target) { elem.appendTo(target); };
// ... more jQuery decoupling
})();
Inside Ember, Setting the innerHtml property would no longer be:
element.innerHTML = html;
but would be wrapped by
Ember.Decouple.DOM.innerHtml(element, html);
The same applies to jQuery calls:
this.$().appendTo(target);
became
Ember.Decouple.jQuery.appendTo(this.$(), target);
Configuration of the decoupling layer would happen prior to parsing ember.js. The following code fragment configures the decoupling layer to work in a Windows 8 store application:
/**
configure ember to wrap certain calls with MSApp.execUnsafeLocalFunction
*/
PlatformDecouple = {}
PlatformDecouple.DOM = {}
PlatformDecouple.DOM.innerHtml = function (element, content) {
MSApp.execUnsafeLocalFunction(function () { element.innerHTML = content; });
};
PlatformDecouple.jQuery = {}
PlatformDecouple.jQuery.appendTo = function (elem, target) {
MSApp.execUnsafeLocalFunction(function () { elem.appendTo(target); });
};
There are probably other places inside Ember where such a mechanism could be helpful. As I said, I am not a JavaScript expert nor do I have fundamental knowledge of ember internals. But… might this be a way to go for?
If not, what would be the alternative instead of waiting for ember version 2 or higher?
Regards, Andreas