問題タブ [html5-template]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - どうすれば保存できますか for a second use?
I'm trying to properly use HTML5 templates in a webpage. However, I discovered that when I take the content of a template and put it into some section of the webpage, the template is emptied and t
I'm trying to properly use HTML5 templates in a webpage. However, I discovered that when I take the content of a template and put it into some section of the webpage, the template is emptied and the same action can't be performed again. How do I ensure the template isn't emptied, or should I be using a different technique?
Example
HTML:
JavaScript:
Live demo: http://jsfiddle.net/Supuhstar/y33a9/
You can have a look at the bundle transforms. It is not a complex process and does not require disabling browser cache for the whole application. The downside is that it doesn´t gives you too much control over the response, although it gives you the option to disable the browser caching.
Please note that with this approach you can only set cache-control as no-cache and you cannot set it as no-store. So I am not sure if your client would accept that! (If this doesn´t help, it might be worth keeping an eye on new features for bundle transforms, as they plan to give more control over the cache headers as per this SO response)
If you think this will be enough, then start by creating a new transform DisableCacheOverHttpsTransform that implements IBundleTransform. The transform will check if the current request is over a secure connection and in that case it will disable browser caching for the bundle:
Now all you need to do is make sure your script and css bundles use this transform. You can use this code to add this transform to all bundles (this should be at the end of your RegisterBundles(BundleCollection bundles) method):
With these changes, when your application is running over https, the responses for your script and css bundles will include the headers Cache-Control:no-cache and Pragma:no-cache.
Hope it helps!
I'm trying to properly use HTML5 templates in a webpage. However, I discovered that when I take the content of a template and put it into some section of the webpage, the template is emptied and t
I'm trying to properly use HTML5 templates in a webpage. However, I discovered that when I take the content of a template and put it into some section of the webpage, the template is emptied and the same action can't be performed again. How do I ensure the template isn't emptied, or should I be using a different technique?
Example
HTML:
JavaScript:
Live demo: http://jsfiddle.net/Supuhstar/y33a9/
You can have a look at the bundle transforms. It is not a complex process and does not require disabling browser cache for the whole application. The downside is that it doesn´t gives you too much control over the response, although it gives you the option to disable the browser caching.
Please note that with this approach you can only set cache-control as no-cache and you cannot set it as no-store. So I am not sure if your client would accept that! (If this doesn´t help, it might be worth keeping an eye on new features for bundle transforms, as they plan to give more control over the cache headers as per this SO response)
If you think this will be enough, then start by creating a new transform DisableCacheOverHttpsTransform that implements IBundleTransform. The transform will check if the current request is over a secure connection and in that case it will disable browser caching for the bundle:
Now all you need to do is make sure your script and css bundles use this transform. You can use this code to add this transform to all bundles (this should be at the end of your RegisterBundles(BundleCollection bundles) method):
With these changes, when your application is running over https, the responses for your script and css bundles will include the headers Cache-Control:no-cache and Pragma:no-cache.
Hope it helps!
javascript - ShadowDOM: コンテンツを繰り返すにはどうすればよいですか?
したがって、Polymer を使用すると、"repeat" 属性を使用して、ShadowDOM ツリー内のコンテンツを繰り返すことができます。しかし、ネイティブの ShadowDOM 仕様でこれを行うにはどうすればよいでしょうか? それは可能ですか？
この例では: http://css-tricks.com/modular-future-web-components/ 作成者は nth-of-type 関数を使用します。ただし、実際の DOM の要素が何回繰り返されるか (この場合は 4 回) がわかっている場合は機能します。私が達成したいのは、無限の回数の繰り返しを処理できるようにすることです。
javascript - IE 11 のテンプレート タグ ポリフィル - テーブル tr および td で動作しない
私は、それをサポートしていないブラウザーのタグを処理できるポリフィル js を使用しています。
jsfiddle のポリフィルのソース コード
ソースの質問
しかし、IE 11 では、このポリフィルが<tr>と<td>タグを含むテンプレートで機能しないことに気付きました。
jsfiddleの私のサンプル
問題は、テンプレート タグ ノードから childNodes を取得しようとするときです。
内にそのようなタグがなかったかのように、 <tr>and children 以外のすべてを返します。<td><template>
何か不足していますか？この問題の回避策はありますか?
PS 評判が悪いため、ソースの問題にコメントを追加できませんでした。そのために残念。
javascript - html の使用: innerHTML.replace
The most popular intro says that I can easily clone html templates within my document.
&
The most popular intro says that I can easily clone html templates within my document.
The word "template" however implies that you won't copy-paste it as is, unmodified. Template means that you want to update some variables with specific values. It recommends the following approach for updating the node:
Isn't it perfect? There is querySelector to get the element so that you can update its attributes. I just do not understand why does he updates the template before cloning it. But that is not my question. The real question is that, in mine case, the location of variable to update is unknown. It can be either attribute or innerText in whatever template structure is. This is the most general and frequent use of template, I believe. So, I can ensure that the variable id is unique within the template, like #reply here
ought to update the #reply, but author does not explain how to do that. I succeeded to use innerHTML on the original template, document.querySelector('#mytemplate').innerHTML.replace(id, value) but this breaks the template for later use, as explained above. I failed to update the cloned text. This is probably because template.clone produces a document fragment, which has no innerHTML. But, before pushing that forth, I decided to investigate for alternatives since I know that innerHTML/outerHTML is not quite standard.
Alternative for innerHTML? inspects the alternatives to innerHTML but again, they assume too much about the template. Instead of just replacing some specific identifiers with user values, they completely recreate the template, which defeats the whole notion of template. Template looses any sense once you recreate its whole code in the variable valuation. So, how is <template> is supposed to use?
As of this writing the data browser is terrible for the more advanced columns, so the answer to your question is no. Hopefully they're working on a more robust version. Keep an eye on http://blog.parse.com/ and cross your fingers.
The most popular intro says that I can easily clone html templates within my document.
&
The most popular intro says that I can easily clone html templates within my document.
The word "template" however implies that you won't copy-paste it as is, unmodified. Template means that you want to update some variables with specific values. It recommends the following approach for updating the node:
Isn't it perfect? There is querySelector to get the element so that you can update its attributes. I just do not understand why does he updates the template before cloning it. But that is not my question. The real question is that, in mine case, the location of variable to update is unknown. It can be either attribute or innerText in whatever template structure is. This is the most general and frequent use of template, I believe. So, I can ensure that the variable id is unique within the template, like #reply here
ought to update the #reply, but author does not explain how to do that. I succeeded to use innerHTML on the original template, document.querySelector('#mytemplate').innerHTML.replace(id, value) but this breaks the template for later use, as explained above. I failed to update the cloned text. This is probably because template.clone produces a document fragment, which has no innerHTML. But, before pushing that forth, I decided to investigate for alternatives since I know that innerHTML/outerHTML is not quite standard.
Alternative for innerHTML? inspects the alternatives to innerHTML but again, they assume too much about the template. Instead of just replacing some specific identifiers with user values, they completely recreate the template, which defeats the whole notion of template. Template looses any sense once you recreate its whole code in the variable valuation. So, how is <template> is supposed to use?
As of this writing the data browser is terrible for the more advanced columns, so the answer to your question is no. Hopefully they're working on a more robust version. Keep an eye on http://blog.parse.com/ and cross your fingers.
javascript - initialization event with polymer.js
Using Polymer I can use the <template>-tag outside of a <polymer-element> using the is='auto-binding' attribute. How can I know in Javascr
Using Polymer I can use the <template>-tag outside of a <polymer-element> using the is='auto-binding' attribute. How can I know in Javascript however that the <template> has actually been initialized. I have tried listening for every possible event I could think of and browsed the source code as well for a bit, but can't seem to find any pointers anywhere although I assume this must be possible.
If what I mean is hard to comprehend a simple jsfiddle showing the issue can be found here, though I think the description above should suffice.
I figured it out. "getListView" actually doesnt initialize your listview.
Using Polymer I can use the <template>-tag outside of a <polymer-element> using the is='auto-binding' attribute. How can I know in Javascr
Using Polymer I can use the <template>-tag outside of a <polymer-element> using the is='auto-binding' attribute. How can I know in Javascript however that the <template> has actually been initialized. I have tried listening for every possible event I could think of and browsed the source code as well for a bit, but can't seem to find any pointers anywhere although I assume this must be possible.
If what I mean is hard to comprehend a simple jsfiddle showing the issue can be found here, though I think the description above should suffice.
I figured it out. "getListView" actually doesnt initialize your listview.
javascript - CONTENT タグのあるカスタム要素で SELECT タグを使用する際の問題
optionShadow DOM の挿入ポイントに要素を取り込めると思っていましたが、がselect空なので、それが起こっているとは思いません。いずれにせよ、Chrome インスペクターは挿入ポイントにはあまり役に立ちませんが、option要素を に挿入する以外のことなど、他の挿入ポイント操作を行うときにブラウザーが機能することを確認しましたselect。
次のようにカスタム要素を定義します。
#guyテンプレートは次のとおりです。
使用法は次のとおりです。
繰り返しますが、これらのoption要素が Shadow DOM に挿入されることを期待selectしていましたが、ドロップダウンを開いたときに表示されません。
からの「派生」が問題なのかもしれないと思ったのですが、どちらもHTMLElement実装してもうまくいきませんHTMLSelectElement。
また、テンプレートを使用せずに を直接変更して実験しましたshadowが、それもうまくいきませんでした。innerHTML
私の現在の考えでは、要素はs、s、またはs のoption外では有効ではなく、ブラウザーは何らかの適合を投げかけていますが、それについては教えてくれません。selectdatalistoptgroup
私は途方に暮れており、おそらくmy の要素にitem変換される2番目の要素プレースホルダーを作成することでこれを回避します ああ。optioncreatedCallback
javascript - 違いは何ですかとポリマーでタグ付け？
<shadow></shadow>paper tabs コンポーネントを読んでいるときに、自分のコンポーネントの 1 つでテストしたタグがあることを知りました。<content></content>そして、それはタグと同様に機能しています。だから私の質問は、それらの違いは何ですか?
javascript - HTML テンプレート タグの id 属性
そこで、Web アプリケーションの問題に対する今後の解決策として、HTML5 テンプレート タグについて詳しく説明します。私が見つけられないように見えることの1つは、テンプレートタグ内で id 属性を使用できますか?
テンプレートは再利用できますが、ID は再利用できません。そのため、同じテンプレートを複数回使用すると (これが最初に考案された理由です)、理論的には無効な HTML が生成されます。公式の回答はありますか？
javascript - テンプレート タグにコンテンツが含まれていません
テンプレートにラップされた html がありますが、テンプレートを有効にしてテンプレート内の要素の一部を変更しようとすると、null として返されます。テンプレートでconsole.logを実行しましたが、返されるのはテンプレートタグの開始と終了タグだけです。たとえば<template id="panel-template"></template>、これはレンダリングされたバージョンであり、カプセル化されているはずのhtmlはどれも含まれていません。現在。
これが私のテンプレートです
これはテンプレートに関連する JavaScript の一部です。もちろん、これを document.ready でラップしました。
これが loadWidgets 関数です。
}
panelTitle が null であるというエラーが表示されますが、これは、テンプレートをアクティブにするときに、カプセル化された html 要素をプルしていないように見えるためだと思います。進め方がわからない。