rsaccon/index.html

## index.html
<!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>
	<!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>