嵌入moment.js在车把上的模板格式 [英] embed moment.js formatting in handlebars templates

问题描述

我试图让Moment.js日期时间在格式化作为我把手模板的一部分。

实样：

 ＆LT; ASP：内容ID =内容1ContentPlaceHolderID =ContentPlaceHolder1=服务器＆GT;
    ＆LT; D​​IV ID =HB-内容＆GT;＆LT; / DIV＆GT;    ＆LT;脚本ID =HB-模板式=TEXT / X-车把模板＆GT;
        ＆LT;小＆GT;最后重新启动：其中; /小＆GT;
        ＆LT; code＆GT;时刻（{{last_started}}）格式（DDDD，MMMM做'）;＆LT; / code＆GT;
        ＆LT; code＆GT;时刻（{{last_started}}）格式。（'H：MMA'）;＆LT; / code＆GT;
    ＆LT; / SCRIPT＆GT;    ＆LT;脚本类型=文/ JavaScript的＆GT;
        变种临时=的document.getElementById（HB-模板）的innerHTML。
        变种模板= Handlebars.compile（临​​时）;
        VAR HTML模板=（{
            last_started：/日期（1463152740000）/
        }）        的document.getElementById（'HB-内容）的innerHTML = HTML。
    ＆LT; / SCRIPT＆GT;
＆LT; / ASP：内容＆GT;
 

输出：

  

最后重新启动：瞬间（/日期（1463152740000）/）格式（DDDD，MMMM做'）;
  时刻（/日期（1463152740000）/）格式（H：MMA'）;

预期输出：

  

最后重新启动：周五，5月13日下午9:15

解决方案

明白了：

    

 ＆LT;脚本ID =HB-模板式=TEXT / X-车把模板＆GT;
    ＆LT;小＆GT;最后重新启动：其中; /小＆GT;
    ＆LT; code＆GT; {{formatDate CURRENT_DATEDDDD，MMMM做'}}＆LT; / code＆GT;
    ＆LT; code＆GT; {{formatDate CURRENT_DATEH：MM：SSA'}}＆LT; / code＆GT;
＆LT; / SCRIPT＆GT;＆LT;脚本类型=文/ JavaScript的＆GT;
    $（函数（）{
        Handlebars.registerHelper（formatDate功能（日期时间，格式）{
            返回时刻（日期时间）.format（格式）;
        }）;        变种临时=的document.getElementById（HB-模板）的innerHTML。
        变种模板= Handlebars.compile（临​​时）;
        VAR HTML模板=（{
            last_started：/日期（1463152740000）/
            CURRENT_DATE：新的Date（）///日期（1463152740000）/
        }）        的document.getElementById（'HB-内容）的innerHTML = HTML。
    }）;
＆LT; / SCRIPT＆GT;
 

I am trying get Moment.js date-time formating as part of my handlebars template.

Actual Sample:

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div id="hb-content"></div>

    <script id="hb-template" type="text/x-handlebars-template">
        <small>Last restarted:</small>
        <code>moment({{last_started}}).format('dddd, MMMM Do');</code>
        <code>moment({{last_started}}).format('h:mma');</code>
    </script>

    <script type="text/javascript">
        var temp = document.getElementById("hb-template").innerHTML;
        var template = Handlebars.compile(temp);
        var html = template({
            last_started: "/Date(1463152740000)/"
        })

        document.getElementById('hb-content').innerHTML = html;
    </script>
</asp:Content>

Output:

Last restarted: moment(/Date(1463152740000)/).format('dddd, MMMM Do'); moment(/Date(1463152740000)/).format('h:mma');

Expected Output:

Last restarted: Friday, May 13th 9:15pm

解决方案

Got it:

<script id="hb-template" type="text/x-handlebars-template">
    <small>Last restarted:</small>
    <code>{{formatDate current_date 'dddd, MMMM Do'}}</code>
    <code>{{formatDate current_date 'h:mm:ssa'}}</code>
</script>

<script type="text/javascript">
    $(function () {
        Handlebars.registerHelper("formatDate", function (datetime, format) {
            return moment(datetime).format(format);
        });

        var temp = document.getElementById("hb-template").innerHTML;
        var template = Handlebars.compile(temp);
        var html = template({
            last_started: "/Date(1463152740000)/",
            current_date: new Date() //"/Date(1463152740000)/"
        })

        document.getElementById('hb-content').innerHTML = html;
    });
</script>

这篇关于嵌入moment.js在车把上的模板格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！