Skip to content

Instantly share code, notes, and snippets.

@rsaccon rsaccon/index.html
Created Jun 3, 2011

Embed
What would you like to do?
Sproutcore 2.0 handlebar bug
<!doctype html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script type="text/html" data-view="MyApp.MyView">
<h1>{{hello}}</h1>
{{#view MyApp.BugView
tagName="span"
class="ninjaSpinner"
isSpinningBinding="MyApp.spinnerController.isSpinning"}}
<span {{bindAttr class="spinner"}}>Inspect this element</span>
{{/view}}
</script>
<p>Description: the inner SPAN should cycle the CSS class, but the outer SPAN does.</p>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.6.1.min.js"%3E%3C/script%3E'))</script>
<script src="js/libs/sproutcore-2.0.a.3.min.js"></script>
<script>
var MyApp = SC.Application.create({});
MyApp.MyView = SC.View.extend({
hello: "hello bug"
});
MyApp.BugView = SC.View.extend({
spinner: "ninjaSpinner1",
isSpinning: null,
_didIsSpinningChange: function() {
if (SC.get(this, "isSpinning")) {
if (this._spinnerInterval) {
clearInterval(this._spinnerInterval);
}
} else {
var frame=0,
self = this;
self._spinnerInterval = setInterval(function(){
frame++;
if (frame === 13) {
frame = 1;
}
SC.set(self, "spinner", 'ninjaSpinner' + frame);
}, 100);
}
}.observes("isSpinning")
});
MyApp.spinnerController = SC.Object.extend({
isSpinning: YES
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.