日历插件示例在.net上不起作用

Question

this code works in expamle html but when I tried to use it in aspx page doesn't work. also I didn't udnerstand the code well. for example <%= month %> used but there is no month also first time I see a html in a script tags, so I am unfamiliar with the coding style, looking for guidance.

        <div class="cal2">

            <script type="text/template" id="template-calendar">
                <div class="clndr-controls">
                    <div class="clndr-previous-button">&lsaquo;</div>
                    <div class="month"><%= month %></div>
                    <div class="clndr-next-button">&rsaquo;</div>
                </div>
                <div class="clndr-grid">
                    <div class="days-of-the-week">
                        <% _.each(daysOfTheWeek, function(day) { %>
                        <div class="header-day"><%= day %></div>
                        <% }); %>
                        <div class="days">
                            <% _.each(days, function(day) { %>
                            <div class="<%= day.classes %>"><%= day.day %></div>
                            <% }); %>
                        </div>
                    </div>
                </div>
                <div class="clndr-today-button">Today</div>
            </script>

        </div>

  <script src="json2.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
  <script src= "moment-2.8.3.js"></script>

  <script src="../src/clndr.js"></script>

this is the plugin homepage http://kylestetz.github.io/CLNDR/

Answer 1

I'm pretty sure the issue will be because you're using Underscore templates: http://underscorejs.org/#template

Because Underscore uses <%= %> in the template markup, .NET uses the same delimiters so when the page is rendered, .NET incorrectly believes it can render the Underscore template.

You need to tell Underscore to use different delimeters, try the following:

<div class="cal2">
    <script type="text/template" id="template-calendar">
        <div class="clndr-controls">
            <div class="clndr-previous-button">&lsaquo;</div>
            <div class="month">{%= month %}</div>
            <div class="clndr-next-button">&rsaquo;</div>
        </div>
        <div class="clndr-grid">
            <div class="days-of-the-week">
                {% _.each(daysOfTheWeek, function(day) { %}
                <div class="header-day">{%= day %}</div>
                {% }); %}
                <div class="days">
                    {% _.each(days, function(day) { %}
                    <div class="{%= day.classes %}">{%= day.day %}</div>
                    {% }); %}
                </div>
            </div>
        </div>
        <div class="clndr-today-button">Today</div>
    </script>
</div>
<script src="json2.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script>
  // Tell Underscore to use different template delimiters - {% %}
  _.templateSettings = {
    interpolate: /\{%=(.+?)%\}/g,
    escape:      /\{%-(.+?)%\}/g,
    evaluate:    /\{%(.+?)%\}/g
  };
</script>
<script src= "moment-2.8.3.js"></script>
<script src="../src/clndr.js"></script>