Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Post an Article
Welcome To Ask or Share your Answers For Others

Categories

What is the <%= %> tag in html?

0 votes
637 views
in Technique[技术] by (71.8m points)

What is the <%= %> tag in html?

I have the following code from a html page:

<div class="bd">
   <h1><%= user.fullname %></h1>
</div>

What is the <%= %> tag? Is this standard html? I never encountered it before. (user.fullname is a javascript variable)

Here is the full code of the page:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="css/layout.css">
    <link rel="stylesheet" href="css/styles.css">
    <script language="javascript">

        // We use this code for handling unexpected errors.
        // Using alert, we are sure that the user get notified in a Mobile device.
        // We add this code at the begining of the index.html and we use only native javascript functions.
        window.onerror = function(msg, url, lineNumber) {
            if (typeof(msg) === "string") {
                var error = msg + "

File: " + url + "
Line: " + lineNumber;
                // Ommit cordova and 3rd party libs errors.
                if (url.indexOf("cordova.js") == -1 && url.indexOf("externallib") == -1) {
                    window.alert(error);
                }
            } else {
                var error = msg;
            }

            // This may help debugging if we use logging apps in iOs or Android.
            if(typeof(console) !== "undefined" && typeof(console.log) === "function") {
                console.log(error);
            }

            // Let default error handler run.
            return false;
        };

    </script>
    <script src="cordova.js"></script>
    <script src="childbrowser.js"></script>
    <script src="webintent.js"></script>
    <script src="PushNotification.js"></script>
    <script src="externallib/jquery.min.js"></script>
    <script src="externallib/jquery.touchSwipe.min.js"></script>
    <script src="externallib/md5.js"></script>
    <script src="externallib/matchMedia.js"></script>
    <script src="externallib/matchMedia.addListener.js"></script>
    <script src="externallib/underscore.js"></script>
    <script src="externallib/backbone.js"></script>
    <script src="externallib/backbone-localstorage.js"></script>
    <script src="lib/mm.js"></script>
    <script src="lib/mm.panels.js"></script>
    <script src="lib/mm.util.js"></script>
    <script src="lib/mm.lang.js"></script>
    <script src="lib/mm.db.js"></script>
    <script src="lib/mm.tpl.js"></script>
    <script src="lib/mm.cache.js"></script>
    <script src="lib/mm.settings.js"></script>
    <script src="lib/mm.widgets.js"></script>
    <script src="lib/mm.sync.js"></script>
    <script src="lib/mm.emulator.js"></script>
    <script src="lib/mm.rdebugger.js"></script>
    <script src="lib/mm.fs.js"></script>
    <script data-main="lib/app.js" src="externallib/require.js"></script>
    <script language="javascript">
        // We should wait to phonegap, if not, we get errors like:
        // http://rickluna.com/wp/2012/04/solving-the-connection-to-the-server-was-unsuccessful-error-in-androidphonegap/
        $(document).bind('deviceready', function() {
            MM.log('Deviceready fired');
            MM.deviceReady = true;
            // Store the device locale for further uses.
            navigator.globalization.getLocaleName(
                function (locale) {
                    MM.lang.locale = locale.value;
                    MM.log("Device locale loaded: " + locale.value);
                },
                function () {}
            );
            // Disable the back button, exists the app.
            document.addEventListener("backbutton", function() {
                MM.panels.goBack();
            }, false);

            // Call deviceIsReady function in plugins.
            // Plugins may not be able to listen for the deviceready event because it's possible that it was fire
            // when plugins whasn't loaded, we use a timeout of 5 seconds.
            setTimeout(function() {
                for (var el in MM.plugins) {
                    var plugin = MM.plugins[el];

                    if (typeof(plugin.deviceIsReady) == 'function') {
                        plugin.deviceIsReady();
                    }
                }
            }, 5000);
            MM.fs.init();
        });

        // This function is for handling when the app is opened using a custom URL SCHEME.
        function handleOpenURL(url) {
            MM._appLaunchedByURL(url);
        }
    </script>

    <style id="mobilecssurl"></style>
</head>
<body>

<div id="add-site" style="display: none">

</div>

<div id="manage-accounts" style="display: none">

</div>

<div id="main-wrapper" style="display: none; background-color: white">

    <div class="header-wrapper">
        <header class="header-main">
            <nav class="nav-main">
                <ul class="nav">
                    <li class="nav-item home menu-home">
                        <a href="#" class="ir"  id="mainmenu">
                            Home
                        </a>
                    </li>
                </ul>
                <span id="page-title"></span>
            </nav>
        </header>
    </div>

    <div id="panel-left" class="panel user-menu"></div>

    <div id="panel-center" class="panel"></div>

    <div id="panel-right" class="panel"></div>
</div>

<div id="app-dialog">
    <div>
        <div class="modalHeader">
        </div>
        <div class="modalContent">
        </div>
        <div class="modalFooter">
        </div>
        <div class="modalClear"></div>
    </div>
</div>

<script type="text/template" id="menu_template">
<header>
    <div class="media">
        <div class="refresh app-ico">
            <a href="#refresh">
                <img width="16" height="16" src="img/reload.png" border="0">
            </a>
        </div>
        <div class="img">
            <img src="<%= MM.util.getMoodleFilePath(user.profileimageurl) %>" border="0">
        </div>
        <div class="bd">
            <h1><%= user.fullname %></h1>
        </div>
    </div>
</header>

</body>
</html>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

What is the <%= %> tag in html?

There is none. There are several templating engines that use <% and %> to delimit either templates or code blocks, though: Active Server Pages (ASP), JavaServer Pages (JSP), probably others. Those usually do server-side processing and replace the text in the <% ... %> with whatever should go there.

For instance, in your example

<h1><%= user.fullname %></h1>

if the user object's fullname property is "Joe Bloggs" when the resource is requested, the engine will swap that in for that token before sending the text, so what the browser actually sees is

<h1>Joe Bloggs</h1>

In your case, as you point out, the processing is happening client-side. Your <% ... %> tokens are within <script type="text/template">...</script> blocks, so the < isn't at all special. (Before DCoder pointed that out to me, I had a complex explanation here of why it worked...but then, er, DCoder pointed out that they were in script blocks, so...)

DCoder also identified that these are templates being handled by backbone.js, which reuses underscore.js's templates.


与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界，一个免费开放的程序员编程交流平台！开放，进步，分享！让技术改变生活，让极客改变未来！ Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

Just Browsing Browsing

1.4m articles

1.4m replys

5 comments

57.0k users

Most popular tags

Snow Theme by Q2A Market
Powered by Question2Answer
...