Beágyazott Javascript sablonok ... lehetséges ez / érvényes?

szavazat
7

Lehetséges, hogy egymásba ágyazott JavaScript sablon címkék pl

<script id=Product type=text/html>
    <div class=product>
        ....
        <div class=features>
            <script id=Features type=text/html>
                <div class=feature>
                    ...
                </div>
            </script>
        </div>
        ...
    </div>
</script>

Amikor a sablon „Termék” értékeljük a funkció sablon már elérhető, mint a sablon, hogy tudok hívni, ha kész vagyok.

Amikor megpróbálom ezt a módszert a böngészőm, észreveszem, bizonyos elemek jelennek meg a rossz sorrendben, mintha elfelejtettem zárócímkét valahol.

Azonban, amikor eltávolítja a beágyazott sablon (Feature) minden jó ...

Gondoltam, ha van megfelelő módon megvalósítani.

A kérdést 12/06/2011 13:41
a forrás felhasználó
Más nyelveken...                            


6 válasz

szavazat
0

Rendben van a jQuery? Ha igen, ez nagyon is lehetséges (sőt, mondhatni, közös):

http://blog.reybango.com/2010/07/12/jquery-javascript-templates-tutorial-nesting-templates/

Válaszolt 12/06/2011 13:52
a forrás felhasználó

szavazat
13

Nem lehet fészket scriptcímkéket. Az út scriptcímkék munka, a böngésző beolvassa a nyitó címke, majd elkezdi kiépíteni egy sor kódot abban értelmezése nélkül a kód egyáltalán. Ez megakadályozza, hogy ezzel, hogy az első alkalommal látja a pontos szekvenciáját < / s c r i p t >. A böngésző mindig megáll az első e úgy találja, és döntően ez figyelmen kívül hagyja minden közbeeső nyitó tag-szekvenciát, mint < s c r i p t >. Ez azért van, mert a böngészője nem sikerült feldolgozni a script kódot, ez nem a dolgát. Ez egy szempontok elkülönítése dolog. ( scriptTag valószínűleg nem kell címkéket egyáltalán, hanem valami több, mint egy CDATAszerkezet. De ők, amit mi.)

Pl a böngésző szempontból:

<script id="Product" type="text/html">              SCRIPT STARTS HERE
    <div class="product">                           SCRIPT CODE CONTINUES
        ....                                        SCRIPT CODE CONTINUES
        <div class="features">                      SCRIPT CODE CONTINUES
            <script id="Features" type="text/html"> SCRIPT CODE CONTINUES (*NOT* START OF SCRIPT)
                <div class="feature">               SCRIPT CODE CONTINUES
                    ...                             SCRIPT CODE CONTINUES
                </div>                              SCRIPT CODE CONTINUES
            </script>                               SCRIPT ENDS
        </div>                                      ENDING `div` TAG (probably mis-matched)
        ...
    </div>
</script>                                           MIS-MATCHED ENDING `script` TAG

Most, ha használja a szerver -oldali sablonrendszer valamilyen amely helyettesíti azokat szkriptcímkéket jelöléssel, majd küldje el a frissített jelölést a böngésző, akkor ez akár a sablonrendszer hogy támogatja-e fészkelő. A böngészők nem.

Válaszolt 12/06/2011 13:56
a forrás felhasználó

szavazat
-1

Próbáld ezt:

<script id="Product" type="text/html">
<!--
    <div class="product">
        ....
        <div class="features">
            <script id="Features" type="text/html">
                <div class="feature">
                    ...
                </div>
            </script>
        </div>
        ...
    </div>
-->
</script>

Ha szükség van, hogy ez:

document.getElementById("Product").text.replace(/(?:^\s*<!--\s*)|(?:\s*-->\s*$)/g, "");
Válaszolt 24/06/2013 18:11
a forrás felhasználó

szavazat
0

Néha azt hiszem, szeretnék beágyazott scipt címkék sablonozó, de ez az, amit meg kell csinálni helyette:

Script 1

 <script id="Product" type="text/html">
     <div class="product">
         ....
         <div class="features">
             <!-- INSERT IGNORE  FEATURES HERE -->   
         </div>
         ...
     </div>
 </script>

Script 2

 <script id="Product_Features" type="text/html">
     <div class="feature">

     </div>
 </script>

Akkor "névtérben az azonosítót, ha igazán akar, így jelezve, hogy a„gyermek”sablont. Ez világosabbá teszi, ez nem kívánják használni önmagában (nyilván ez rajtad múlik, ha van értelme, vagy sem).

Miután elolvasta TJs válasz ez lett az egyetlen nyilvánvaló alternatívát, amit eredetileg gondoltam akartam (beágyazott script).

Azonban, akkor valószínűleg nem kell beágyazott sablonokat, ha nem kell, hogy a választás, hogy melyik a „gyermek” sablont használja. Ha csak az egyik lehetséges elrendezését a gyermek sablon akkor csak használ egy „foreach” szerint a sablon motor.

Válaszolt 25/08/2016 20:43
a forrás felhasználó

szavazat
0

Használhatja <style type="text/html"></style>vagy <noscript></noscript>tekerje a <script></script>címkét.

Azt hiszem, <noscript>jobb, mint a<style>

példa:

<noscript id="s">
  <div class="r">
    <p>{%= o.rand %}</p>
    <script>
      console.log('sdf');
    </script>
  </div>
</noscript>

<style id="s" type="text/html">
  <div class="r">
    <p>{%= o.rand %}</p>
    <script>
      console.log('sdf');
    </script>
  </div>
</style>

Válaszolt 09/01/2019 23:55
a forrás felhasználó

szavazat
0

Igen , lehetséges, hogy a beágyazott <script>címkéket (XHTML application/xhtml+xml):

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>XHTML nested &lt;script&gt;</title>
</head>
<body>
  <script id="Product" type="text/html">
    <div class="product">
      ....
      <div class="features">
        <script id="Features" type="text/html">nested
          <div class="feature">
            ...
          </div>
        </script>
      </div>
      ...
    </div>
  </script>
</body>
</html>

Kódrészlet nem támogatja az XHTML, azt kell használni iframe adatokkal URL:

<iframe src="data:application/xhtml+xml,%3Chtml%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%20contenteditable%3D%22true%22%3E%3Chead%3E%3Ctitle%3EXHTML%20nested%20%26lt%3Bscript%26gt%3B%3C%2Ftitle%3E%3C%2Fhead%3E%3Cbody%3E%3Cstyle%3Estyle%2C%20script%20%7B%20display%3A%20block%3B%20font-family%3A%20monospace%3B%20white-space%3A%20pre%3B%20padding-left%3A%2010px%20%7D%0Astyle%20%7B%20border-left%3A%2010px%20solid%20%2398A6C0%20%7D%0Ascript%20%7B%20border-left%3A%2010px%20solid%20%23D6F034%20%7D%3C%2Fstyle%3E%3Cscript%20id%3D%22Product%22%20type%3D%22text%2Fhtml%22%3Eouter%0A%20%20%20%20%3Cdiv%20class%3D%22product%22%3E%0A%20%20%20%20%20%20%20%20....%0A%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22features%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cscript%20id%3D%22Features%22%20type%3D%22text%2Fhtml%22%3Einner%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22feature%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20...%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fscript%3E%0A%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20...%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Fscript%3E%3C%2Fbody%3E%3C%2Fhtml%3E" width="100%"></iframe>

Igen , lehetséges, hogy a beágyazott <script>tag a HTML DOM:

productScript = document.createElement('script')
productScript.setAttribute('id', 'Product')
productScript.setAttribute('type', 'text/html')
productScript.appendChild(document.createTextNode('outer'))

product = document.createElement('div')
product.setAttribute('class', 'product')
product.appendChild(document.createTextNode(`
        ....
        `))

features = document.createElement('div')
features.setAttribute('class', 'features')

featuresScript = document.createElement('script')
featuresScript.setAttribute('id', 'Features')
featuresScript.setAttribute('type', 'text/html')
featuresScript.appendChild(document.createTextNode('inner'))

feature = document.createElement('div')
feature.setAttribute('class', 'feature')
feature.appendChild(document.createTextNode(`
        ...
    `))

featuresScript.appendChild(feature)
features.appendChild(featuresScript)
product.appendChild(document.createTextNode(`
        ...
    `))
product.appendChild(features)
productScript.appendChild(product)
document.body.appendChild(productScript)
script[type="text/html"] {
  display: block;
  font-family: monospace;
  white-space: pre;
  padding-left: 10px;
  border-left: 10px solid #D6F034
}

Nem , ez nem lehetséges, hogy beágyazott <script>tag a HTML sorszámozás. A tartalom nem értelmezhető:

let product = document.getElementById('Product')
console.log(product.textContent)
<script id="Product" type="text/html">
    <div class="product">
        ....
        <div class="features">
            <script id="Features" type="text/html">nested
                <div class="feature">
                    ...
                </div>
            </script>
        </div>
        ...
    </div>
</script>

Válaszolt 31/12/2019 22:48
a forrás felhasználó

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more