Атрибути на етикета на скрипта - javascript

Опитвам се да разбера основите на шаблоните и имам следния проблем. Когато се опитам да прикача атрибут ID или/и type към маркера <script> в моя HTML код, това просто не работи:

<!DOCTYPE html>
<html>

           <head>
                 <link rel="stylesheet" type="text/css" href="/bgstyle.css">
             <script src="somescript.js"></script>

           </head>
           <body>

    <script type="text/html" id="template1">
                <form name="formXY">
                    <p>
                        <label>Field1
                            <input type="text" name="form_field1" value= "{{field1}}">
                        </label>
                        <button type="button">Submit</button>
                    </p>
                </form>
            </script>
</body>
</html>

Пуснах това в chrome/firefox/IE9/Opera и никой от тях не анализира кода между таговете <script>. Браузърите смятат, че това е просто текстово поле. Когато премахна атрибутите ID и type, той отново се анализира правилно.

Сигурно пропускам нещо много основно...


javascript html client-side-templating
person DDEX    schedule 12.01.2013    source източник
comment
И защо бихте поставили HTML в тагове на скрипт?   -  person adeneo    schedule 13.01.2013
comment
@adeneo - шаблони? stackoverflow.com/a/5679857/144496   -  person Martin    schedule 13.01.2013
comment
@Martin - да, някои рамки и системи за шаблони го правят по този начин, което не означава, че като цяло е добра идея!   -  person adeneo    schedule 13.01.2013

Отговори (2)


arrow_upward
2
arrow_downward

Трябва да добавите не-javascript type към маркера на скрипта, тъй като въпросът е, че не искате браузърът да го анализира (като javascript) и с помощта на персонализиран type браузърът ще го игнорира (докато не го вземете с javascript това е)

<!DOCTYPE html>
<html>

<head>
   <link rel="stylesheet" type="text/css" href="/bgstyle.css">
   <script src="somescript.js"></script>

</head>
<body>

    <script type="text/x-handlebars-template" id="template1">
        <form name="formXY">
        <p>
            <label>Field1
            <input type="text" name="form_field1" value= "{{field1}}">
            </label>
            <button type="button">Submit</button>
        </p>
        </form>
    </script>
</body>
</html>

И тогава във вашия javascript somescript.js трябва да получите съдържанието на този маркер на скрипта, като използвате нещо подобно

var uncompiledTemplate = document.getElementById('template1').innerHtml;

// then pass this template to your templating engine...
// if your using handlebars:
var template = Handlebars.compile(uncompiledTemplate);

И тогава можете да работите с вашия шаблон!

person Pete Mitchell    schedule 12.01.2013
comment
Благодаря, това е нещото, което ми липсваше :)...така че първо трябва да инсталирам машина за шаблони и след това мога да използвам атрибутите. Благодаря - person DDEX; 13.01.2013
comment
Типът text/html също защитава съдържанието на скрипта от (опит) оценка на JavaScript. Не е задължително да е напълно гримиран тип. - person Pointy; 13.01.2013
comment
@Pointy благодаря! Ще актуализирам отговора си. Персонализираният тип може да бъде добър намек за това каква машина за шаблони може би се използва? Част от синтаксиса може да бъде подобен - person Pete Mitchell; 13.01.2013
comment
@PeteMitchell о, да, определено, особено. ако шаблонната система има куки в нея за автоматично компилиране на такива шаблони. - person Pointy; 13.01.2013
comment
Използването на text/html е от решаващо значение за IDE като PyCharm, за да форматира правилно съдържанието на тага на скрипта. Ако използвате измислен тип, той ще интерпретира съдържанието като обикновен низ, правейки използването на IDE функции като подчертаване и т.н. безполезно... - person Karlis Rode; 17.04.2015

arrow_upward
0
arrow_downward

Съдържанието на маркера <script> никога не се анализира в DOM елементи, съдържанието просто се появява в DOM като текст (въпреки че <script> е display:none; по подразбиране, така че не се показва на страницата). Ако е предоставен type, браузърът трябва да го разпознае, преди да се опита да го изпълни. Обърнете внимание, че по-старите браузъри вместо това използваха атрибута language.

person Neil    schedule 12.01.2013