Javascript 引用下划线模板中require模块内部的枚举值

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

---

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

您需要将RepeatButtonState混合到您的模型中。下划线模板不使用函数作用域，它们依赖于“with”语句进行变量作用域。要使用枚举呈现模板，需要执行以下操作：

this.$el.html(this.template(
    _.extend(this.model.toJSON(), { 
        'RepeatButtonState': RepeatButtonState 
    })
));

---

你是如何呈现模板的？我将把它添加进去。等一下，谢谢。这正是我想要的。

this.$el.html(this.template(
    _.extend(this.model.toJSON(), { 
        'RepeatButtonState': RepeatButtonState 
    })
));