Permalink
Browse files

BarView: bind bar's width to percent property

  • Loading branch information...
1 parent cc4e58f commit f85c308ccef773c5ca941b92f613326bbb44bf57 James A. Rosen committed Sep 23, 2012
Showing with 12 additions and 1 deletion.
  1. +6 −1 lib/BarView.js
  2. +6 −0 spec/javascripts/BarView.spec.js
View
7 lib/BarView.js
@@ -1,5 +1,10 @@
Ember.ProgressBars = Ember.ProgressBars || {};
Ember.ProgressBars.Bar = Ember.View.extend({
- template: Em.Handlebars.compile('<div class="progress"><div class="bar"></div></div>')
+ template: Em.Handlebars.compile('<div class="progress"><div class="bar"></div></div>'),
+ percent: 0,
+ onPercentChange: function() {
+ var percent = this.get('percent') || 0;
+ this.$('.bar').css('width', "%@%".fmt(percent) );
+ }.observes('percent')
});
View
6 spec/javascripts/BarView.spec.js
@@ -27,6 +27,12 @@ describe('ProgressBars.Bar', function() {
it('renders a progress bar', function() {
expect( $fixture.find('.progress .bar').length ).toBe(1);
});
+
+ it("binds the bar's width to percent", function() {
+ bar.set('percent', 52);
+ var style = bar.$('.bar').attr('style');
+ expect( style ).toMatch( /\bwidth:\s*52%;/ );
+ });
});
});

0 comments on commit f85c308

Please sign in to comment.