Skip to content

Instantly share code, notes, and snippets.

@ZogStriP

ZogStriP/ember.js-star-rating.html

Last active December 18, 2015 18:09
Show Gist options
  • Save ZogStriP/5823562 to your computer and use it in GitHub Desktop.
Save ZogStriP/5823562 to your computer and use it in GitHub Desktop.
Download ZIP
Star ratings example in Ember.js
Raw
ember.js-star-rating.html
<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.4/handlebars.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.4/ember.min.js"></script>
</head>
<style>
.rating {
unicode-bidi: bidi-override;
direction: rtl;
text-align: left;
}
.rating > span {
display: inline-block;
position: relative;
width: 1em;
}
.rating > span:hover,
.rating > span:hover ~ span,
.rating > span.active,
.rating > span.active ~ span {
color: transparent;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before,
.rating > span.active:before,
.rating > span.active ~ span:before {
position: absolute;
left: 0;
color: gold;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before,
.rating > span.active:before,
.rating > span.active ~ span:before {
content: "\2605";
}
.rating.sun > span:hover:before,
.rating.sun > span:hover ~ span:before,
.rating.sun > span.active:before,
.rating.sun > span.active ~ span:before {
content: "\2600";
}
</style>
<body>
<script type="text/x-handlebars">
{{rating max="10"}}
{{rating value=2}}
{{rating symbol="☀" class="sun"}}
</script>
<script>
App = Ember.Application.create();
Ember.Handlebars.helper("rating", Ember.View.extend({
classNames: ["rating"],
symbol: "☆",
max: 5,
value: 0,
render: function(buffer){
var max = this.get("max");
for(var i = max; i > 0; i--) {
buffer.push("<span data-value='" + i + "' class='" + (i === this.get("value") ? "active" : "") + "'>" + this.get("symbol") + "</span>");
}
},
didInsertElement: function(){
var _this = this;
this.$("span").on("click.rating", function(e){
_this.$("span").removeClass("active");
var $target = $(e.currentTarget);
$target.addClass("active");
_this.set("value", $target.data("value"));
});
},
willDestroyElement: function(){
this.$("span").off("click.rating");
}
}));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment