repeatButtonState という列挙型があります。
// repeatButtonState.js:
define({
DISABLED: 0,
REPEAT_VIDEO_ENABLED: 1,
REPEAT_STREAM_ENABLED: 2
});
アンダースコアのテンプレート エンジンを使用して、repeatButton をレンダリングしています。
<script type="text/template" id="repeatButtonTemplate">
<% if(state === RepeatButtonState.REPEAT_STREAM_ENABLED) { %>
<svg class="pressed repeatButtonSvgIcon" width="16" height="16" >
<g transform="scale(0.57,0.57)" fill="#666" stroke="none">
<path d="M24.249,15.499C24.24,20.331,20.331,24.240000000000002,15.498999999999999,24.249000000000002C12.983999999999998,24.249000000000002,10.730999999999998,23.185000000000002,9.133999999999999,21.486000000000004L11.201999999999998,20.044000000000004L3.3009999999999984,16.341000000000005L4.044999999999998,25.035000000000004L6.237999999999998,23.506000000000004C8.481999999999998,26.100000000000005,11.799999999999997,27.748000000000005,15.497999999999998,27.748000000000005C22.264999999999997,27.748000000000005,27.747,22.266000000000005,27.747,15.499000000000004H24.249ZM15.499,6.75C18.015,6.75,20.268,7.8149999999999995,21.866,9.514L19.798,10.956999999999999L27.698999999999998,14.658L26.953,5.965L24.761,7.494C22.516,4.9,19.198999999999998,3.2489999999999997,15.498999999999999,3.2489999999999997C8.734,3.25,3.25,8.734,3.249,15.499H6.75C6.758,10.668,10.668,6.758,15.499,6.75Z" stroke-width="3" stroke-linejoin="round">
</path>
<path d="M24.249,15.499C24.24,20.331,20.331,24.240000000000002,15.498999999999999,24.249000000000002C12.983999999999998,24.249000000000002,10.730999999999998,23.185000000000002,9.133999999999999,21.486000000000004L11.201999999999998,20.044000000000004L3.3009999999999984,16.341000000000005L4.044999999999998,25.035000000000004L6.237999999999998,23.506000000000004C8.481999999999998,26.100000000000005,11.799999999999997,27.748000000000005,15.497999999999998,27.748000000000005C22.264999999999997,27.748000000000005,27.747,22.266000000000005,27.747,15.499000000000004H24.249ZM15.499,6.75C18.015,6.75,20.268,7.8149999999999995,21.866,9.514L19.798,10.956999999999999L27.698999999999998,14.658L26.953,5.965L24.761,7.494C22.516,4.9,19.198999999999998,3.2489999999999997,15.498999999999999,3.2489999999999997C8.734,3.25,3.25,8.734,3.249,15.499H6.75C6.758,10.668,10.668,6.758,15.499,6.75Z"></path>
</g>
</svg>
<% } else { %>
<svg class="repeatButtonSvgIcon <%- state === RepeatButtonState.REPEAT_VIDEO_ENABLED ? 'pressed' : '' %>" width="16" height="16">
<g transform="scale(0.57,0.57)" fill="#666" stroke="none">
<path d="M24.083,15.5C24.073999999999998,20.239,20.238999999999997,24.073999999999998,15.499999999999998,24.083C10.758999999999999,24.073999999999998,6.922999999999998,20.238999999999997,6.914999999999997,15.499999999999998C6.922999999999997,10.758999999999999,10.758999999999997,6.922999999999998,15.499999999999998,6.914999999999997C17.412999999999997,6.914999999999997,19.165,7.543999999999997,20.589999999999996,8.600999999999997L18.807999999999996,10.383999999999997L27.236999999999995,12.639999999999997L24.976999999999997,4.212999999999997L23.086999999999996,6.102999999999997C21.014999999999997,4.425999999999997,18.369999999999997,3.414999999999997,15.499999999999996,3.414999999999997C8.826,3.418,3.418,8.826,3.416,15.5C3.418,22.175,8.826,27.583,15.5,27.583S27.583,22.175,27.583,15.5H24.083Z" stroke-width="3" stroke-linejoin="round">
</path>
<path d="M24.083,15.5C24.073999999999998,20.239,20.238999999999997,24.073999999999998,15.499999999999998,24.083C10.758999999999999,24.073999999999998,6.922999999999998,20.238999999999997,6.914999999999997,15.499999999999998C6.922999999999997,10.758999999999999,10.758999999999997,6.922999999999998,15.499999999999998,6.914999999999997C17.412999999999997,6.914999999999997,19.165,7.543999999999997,20.589999999999996,8.600999999999997L18.807999999999996,10.383999999999997L27.236999999999995,12.639999999999997L24.976999999999997,4.212999999999997L23.086999999999996,6.102999999999997C21.014999999999997,4.425999999999997,18.369999999999997,3.414999999999997,15.499999999999996,3.414999999999997C8.826,3.418,3.418,8.826,3.416,15.5C3.418,22.175,8.826,27.583,15.5,27.583S27.583,22.175,27.583,15.5H24.083Z">
</path>
</g>
</svg>
<% } %>
</script>
RepeatButtonState が定義されていないため、これはエラーをスローします。テンプレート内から RepeatButtonState を参照することは可能ですか?
テンプレートをレンダリングする RepeatButtonView は次のとおりです。
define([
'repeatButtonState'
], function (RepeatButtonState) {
'use strict';
var RepeatButtonView = Backbone.View.extend({
className: 'repeatButton button',
template: _.template($('#repeatButtonTemplate').html()),
events: {
'click': 'toggleRepeat'
},
disabledTitle: chrome.i18n.getMessage("repeatDisabled"),
repeatVideoEnabledTitle: chrome.i18n.getMessage("repeatVideoEnabled"),
repeatPlaylistEnabledTitle: chrome.i18n.getMessage("repeatPlaylistEnabled"),
render: function () {
this.$el.html(this.template(this.model.toJSON()));
switch(this.model.get('state')) {
case RepeatButtonState.DISABLED:
this.$el.attr('title', this.disabledTitle);
break;
case RepeatButtonState.REPEAT_VIDEO_ENABLED:
this.$el.attr('title', this.repeatVideoEnabledTitle);
break;
case RepeatButtonState.REPEAT_STREAM_ENABLED:
this.$el.attr('title', this.repeatPlaylistEnabledTitle);
break;
default:
console.error("Unhandled repeatButtonState:", this.model.get('state'));
break;
}
return this;
},
initialize: function () {
this.listenTo(this.model, 'change:state', this.render);
},
toggleRepeat: function () {
this.model.toggleRepeat();
}
});
return RepeatButtonView;
});
以前は、render 内で RepeatButtonState に基づいて要素を非表示/表示していましたが、テンプレートにロジックを少しだけスプラッシュした方がよいと考えました。