标签: html-templates
Meteor Blaze在Template.onCreated中访问Template.contentBlock
我正在为孩子们写一个定制的Blaze块助手:
<template name="parent">
{{> Template.contentBlock ..}}
</template>
<template name="child">
{{> Template.contentBlock ..}}
</template>
我的预期用例是拥有一个带有任意子节点的模板,我在html文件中定义.
{{#parent}}
{{#child id="child1" title="Child 1"}}
<p>This is content of child 1</p>
{{/child}}
{{#child id="child2" title="Child 2"}}
<p>This is content of child 2</p>
{{/child}}
{{#child id="childN" title="Child N"}}
<p>This is content of child N</p>
{{/child}}
{{/parent}}
到目前为止没问题.但是,在父模板中onCreated/ autorun我想要访问child模板.我想使用这些数据在父模板元素中动态创建
Template.parent.onCreated(function () {
const instance = this;
instance.state = new ReactiveDict();
instance.autorun(function () {
const contentBlocks = // how?
instance.state.set("children", contentBlocks);
});
});
Template.parent.helpers({ …推荐指数
解决办法
查看次数
HTML <template> 元素与 Javascript 模板文字
Mozilla 表示Web 组件由三种主要技术组成：
根据 ECMAscript 的模板文字，数字 3，“HTML 模板”甚至是必要的吗？
看看我从James Milner那里得到的这个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Web Component</title>
<script type="text/javascript">
// We define an ES6 class that extends HTMLElement
class CounterElement extends HTMLElement{
constructor() {
super();
// Initialise the counter value
this.counter = 0;
// We attach an open shadow root to the custom element
const shadowRoot= this.attachShadow({mode: 'open'});
// We define some inline styles …javascript web-component template-literals hyperhtml html-templates
推荐指数
解决办法
查看次数
是否可以以编程方式在 Web 组件中插入元素？
是否可以自动或以编程方式插入特定类型的嵌套 Web 组件或元素，而无需为其指定slot属性？
考虑这样的结构：
<parent-element>
<child-element>Child 1</child-element>
<child-element>Child 2</child-element>
<p>Content</p>
</parent-element>
有了<parent-element>这样的 Shadow DOM：
<div id="child-elements">
<slot name="child-elements">
<child-element>Default child</child-element>
</slot>
</div>
<div id="content">
<slot></slot>
</div>
预期的结果是：
<parent-element>
<#shadow-root>
<div id="child-elements">
<slot name="child-elements">
<child-element>Child 1</child-element>
<child-element>Child 2</child-element>
</slot>
</div>
<div id="content">
<slot>
<p>Content</p>
</slot>
</div>
</parent-element>
换句话说，我想强制<child-element>s 只允许在<parent-element>类似于<td>元素中只允许在一个<tr>元素中使用。我希望它们被放置在<slot name="child-elements">元素中。必须在slot它们中的每一个上指定一个属性以将它们放置在 的特定插槽中<parent-element>似乎是多余的。同时， 中的其余内容<parent-element>应该自动插入到第二个<slot>元素中。
我首先搜索了一种在注册父元素时定义它的方法，尽管CustomElementRegistry.define()目前仅支持extends作为选项。
然后我想，也许有一个功能允许手动插入元素，即类似的东西childElement.slot('child-elements') …
推荐指数
解决办法
查看次数
将模板标签添加到 HTML 文档的头部或正文有什么区别吗？
使用head还是body添加模板标签有什么需要注意的地方吗？前任：
conste template = document.createElement('template');
// add template content etc.
document.body.appendChild(template);
// or
document.head.appendChild(template);
我只是偶然发现了一个动态添加模板的代码库head，我的直觉告诉我，也许这不是最好的主意，但也许并不重要？
推荐指数
解决办法
查看次数
如何在没有Html-Imports的情况下打包或导入Html-Templates
由于Html-Imports现已在Chrome(https://www.chromestatus.com/feature/5144752345317376)中弃用,并且将被删除,我想知道其他选择是什么.
我目前正在使用Html-Imports导入Html模板.到目前为止,我只看到两种选择:
- 将所有HTML文件捆绑在一个文件中.这也会改善生产中的下载时间,但这会减少封装和模块化.有一个聚合物捆绑器可以通过在分离的HTML文件中遍历HTML-Import-Statements来完成这项工作.但这意味着,HTML-Imports仍然存在于我的代码中,即使将来任何浏览器都不支持它.
- 使用XHttpRequests构建某种模块加载器,并在运行时将模板编织到一个HTML文件中.这将保留封装和模块化,但这对我来说有一个难闻的气味,因为我基本上会自己重建import-Statements.
是否有一种新的香草方式来导入Html模板？(通过"vanilla"我基本上意味着没有任何其他工具,如预编译器或捆绑器参与)
推荐指数
解决办法
查看次数
为什么 DocumentFragment 没有 getElementsByName？
我按照MDN 上给出的说明使用<template>. 与示例中给出的略有不同，我的代码是：
<template id="template">
<tr>
<td name="id"></td>
<td name="name"></td>
<td name="size"></td>
<td name="Status">
</td>
</tr>
</template>
// ...
const item = document.importNode(template.content, true);
item.getElementsByName("id")[0].textContent = token;
item.getElementsByName("name")[0].textContent = file.name;
item.getElementsByName("size")[0].textContent = file.size;
fileList.appendChild(item);
// ...
然而，似乎item，其中__proto__isDocumentFragment没有getElementsByName方法。现在有getElementById和，这对我来说很困惑吗querySelector？
有什么理由吗？
在相关情况下，我的浏览器是 FireFox Quantum 69.0.1 和 Chrome Canary 79.0.3918.0。
推荐指数
解决办法
查看次数
HTML 模板与在 Web 组件内定义 HTML
当您可以简单地在 Web 组件（shadowRoot.innerHTML）中定义 HTML 时，我似乎无法理解或找出为什么应该将 HTML 模板与 Web 组件一起使用。
创建模板并将其克隆到 Web 组件内有什么好处？我可以看到两个 Web 组件共享相同的 HTML 是有原因的，但除此之外我不知道。
我是否遗漏了一些根本上重要的东西？
推荐指数
解决办法
查看次数
highcharter 集成在 R Shiny 基于“html 模板”的应用程序中
上下文
我想使用基于html 模板的高级 UI 创建一个 R Shiny 仪表板。因此，UI 是用纯 HTML 构建的，我使用Bootstrap 4 免费模板作为起点。
问题 虽然使用 highcharter 及其 Shiny 集成功能可以很好地处理超级基本的 HTML 文件（与上面的教程相同），但一旦我使用引导仪表板主题，图表就不会显示。
我已经尝试过的
可重现的示例
在这里共享可重现的示例很困难，因为您需要完整的 SB Admin 2 文件夹才能使其工作。基本上这不起作用：
# insert the following in my HTML template (index.html)
{{ highchartOutput("highcharter_plot") }}
相应的可复制服务器部分：
# in server.R
output$highcharter_plot <- renderHighchart({
data(citytemp)
hc <- highchart() %>%
hc_xAxis(categories = citytemp$month) %>%
hc_add_series(name = "Tokyo", data = citytemp$tokyo) %>%
hc_add_series(name = "London", data = citytemp$london) %>%
hc_add_series(name = "Other …推荐指数
解决办法
查看次数
文档片段内自定义元素的初始化
考虑这个template带有两个 flatx-element和一个嵌套的HTML 。
<template id="fooTemplate">
<x-element>Enter your text node here.</x-element>
<x-element>
<x-element>Hello, World?</x-element>
</x-element>
</template>
如何初始化（触发构造函数）从fooTemplate文档片段克隆的所有自定义元素而不将其附加到 DOM，也不是通过使用is="x-element";扩展内置元素；要么是整个片段。
class XElement extends HTMLElement {
constructor() { super(); }
foo() { console.log( this ); }
} customElements.define( 'x-element', XElement );
const uselessf = function( temp ) {
const frag = window[ temp ].content.cloneNode( true );
/* Your magic code goes here:
*/ do_black_magic( frag );
for (const e of frag.querySelectorAll('x-element') )
e.foo(); // This should …html javascript documentfragment custom-element html-templates
推荐指数
解决办法
查看次数
Angular2 include html from server into a div
I got a serie of html in my server. For example:
And I trying to include those files into a<div> in my angular2 v4 app. For example:
component.ts
public changePage(name: string) {
switch (name) {
case 'intro': this.myHtmlTemplate = 'http://docs.example.com/intro.html'; break;
case 'page1': this.myHtmlTemplate = 'http://docs.example.com/page1.html'; break;
case 'page2': this.myHtmlTemplate = 'http://docs.example.com/page2.html'; break;
}
}
component.html
<div [innerHtml]="myHtmlTemplate"></div>
but it doesnt work. I tried the following solutions:
推荐指数
解决办法
查看次数
如何使用角度材质组件创建Html电子邮件模板
如何使用角度材质组件创建html电子邮件正文.
由于组件标签未呈现.例如,简单的角形材料卡如下.有没有办法这样做？
<mat-card>
<mat-card-header>
...
</mat-card-header>
<mat-card-content>
...
</mat-card-content>
</mat-card>
推荐指数
解决办法
查看次数
为什么 open-wc 脚手架推广 lit-html
我在一家拥有大型 webcomponents 目录的大公司中使用 Polymer 1 和 2 工作了大约一年，我相信 webcomponents 非常有用。我知道像https://adamsilver.io/articles/the-problem-with-web-components/这样的“缺点想法” 。
现在我正在深入研究如何有效地使用 vanilla webcomponents。我刚开始的前提是使用 vanilla web-components 将有助于与 webcomponents 改进保持一致（我无法为这样的想法辩护 - 我现在只是假设这一点）。然后我试图创建一个堆栈来使用 vanilla webcomponents。
在寻找推荐的测试方法时，我访问了https://open-wc.org/testing，我认为它的目的是在不添加特定框架的情况下促进良好实践（来自其网站：“Open Web Components is a community-effort,独立于任何框架或公司”）。这正是我正在寻找的：一种良好的实践和众所周知的推荐，类似于我们对来自 micorservice.io 的微服务（这只是一个类比）。
尝试使用我在 package.json 中得到的脚手架：
"dependencies": {
"lit-html": "^1.0.0",
"lit-element": "^2.0.1"
}
所以，我的主要问题是：为什么要为 webcomponent 使用 lit-html？
围绕我的主要问题的有用疑问，据我所知，lit-html 是由谷歌和聚合物团队赞助的框架。这不是以某种方式迫使我使用 polifylls 在所有浏览器中运行吗？假设我不关心浏览器不符合 webcomponents，为什么我需要一个框架？
web-component polymer html-templates native-web-component lit-html
推荐指数
解决办法
查看次数
标签 统计
html-templates ×12
html ×5
javascript ×5
angular ×2
email ×1
html-imports ×1
hyperhtml ×1
lit-html ×1
meteor ×1
meteor-blaze ×1
polymer ×1
r ×1
shadow-dom ×1
shiny ×1
spacebars ×1
typescript ×1