引用下划线模板中 require 模块内保存的枚举值

Referencing enum value held inside of a require module from underscore template

本文关键字：保存 枚举 模块 require 下划线 引用      更新时间：2023-09-26

我有一个名为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;
});

我以前在渲染中隐藏/显示基于 RepeatButtonState 的元素，但我认为最好在模板中加入一些逻辑。

您需要将 RepeatButtonState 混合到模型中。下划线模板不使用函数作用域，它们依赖于 'with' 语句来限定变量范围。要让你的模板与枚举一起渲染，你需要做这样的事情：

this.$el.html(this.template(
    _.extend(this.model.toJSON(), { 
        'RepeatButtonState': RepeatButtonState 
    })
));
相关文章：