templates 相关问题

我有两个类似的选择。第一个使用标签，工作正常，第二个使用新的标签，它不再工作。谁能告诉我如何得到这个... 我有两个类似的选择。第一个使用 <div> 标签，工作正常，第二个使用新的 <template> 标签，它不再工作。谁能告诉我如何使用 <template> 标签让它与 jQuery 一起工作？ HTML <div id="div"> <div>content</div> </div> <template id="template"> <div>content</div> </template> JavaScript var $div = $('#div'); var $content = $div.find('div'); console.log($content); //works ($content.length == 1) var $template = $('#template'); var $content = $template.find('div'); console.log($content); //doesn't work ($content.length == 0) http://jsfiddle.net/s8b5w0Le/1/ HTMLTemplateElement 将 DOM 保存到单独的属性中。 jQuery <script src="jquery-3.1.0.js"></script> <script type="text/javascript"> $(document).ready(function() { var $div = $('#div'); var $content = $div.find('div'); console.log($content.text()); // output "content", inner div var $template = $('#template'); var node = $template.prop('content'); var $content = $(node).find('div'); console.log($content.text()); // output "content", inner template }); JavaScript document.createElement('template').content 我相当确定这与 Chrome 使用 Shadow dom 有关（感谢 Polymer...）您可以使用 /deep/ 组合器试试运气（可能不适用于其他浏览器），但我认为最强大的解决方案是 $template[0].outerHTML，如您的评论中所示，如果您只需要文本。如果您需要 jQuery 功能，使用 $.parseXML（以避免 Chrome 的本机 dom 构建）可能会在所有浏览器上实现这一点（可以确认 Chrome + FF）。示例如下：http://jsfiddle.net/3fe9jjfj var tc = $('#template')[0].outerHTML; $template = $($.parseXML(tc)).contents(); console.log($template); console.log($template.find('div')); 两个日志都按我们的预期返回，并且 $template 现在可以被视为普通的 jQuery 对象。正如其他人所指出的，Chrome 将 <template> 子元素放入影子 DOM 中。要访问它们： // Access the JavaScript object for the template content $('template')[0] // Make a jQuery selection out of it $($('template')[0]) // Now you can search it $($('template')[0]).find('div.someclass').css('color','#000'); 一种方式，对于聚会来说太晚了，但我最终这样做了： function resolveTemplate(id) { return $(id).contents(); } ... var $searchIcon = resolveTemplate('#search-icon-template'); $('#div').append($searchIcon); 如果模板元素内的元素用容器包装，则可以照常使用所有 JQuery 方法。 const temp = $("#template").contents().clone(); $(temp).find("h1").text("A dynamic title"); temp.appendTo($("#app"));<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="app"></div> <template id="template"> <div class="container"> <h1>lorem ipsum</h1> <p>lorem ipsum </p> <img src="" alt=""> </div> </template> 容器还可以使用 JQuery 动态附加。或者，如果您不需要容器，您可以附加其内容。 const temp = $('<div></div>').html($("#template").contents().clone()); $(temp).find("h1").text('dynamic title'); $(temp).find("p").text('But no container this time'); temp.contents().appendTo($("#app"));<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="app"></div> <template id="template"> <h1>lorem ipsum</h1> <p>lorem ipsum </p> <img src="" alt=""> </template> <template> <div class="template-container"> <div class="content">content</div> </div> </template> var templateHtml = ('#template').html() // this will return the template container div var template = $(templateHtml); var content = template.find('.content'); console.log(content); var $content = $template.content.find('div'); ...而不是... var $content = $template.find('div'); 为我工作。 HTML5模板默认是display: none;，模板中的childNodes无效，如果你在控制台检查它你会发现不同的东西

javascript jquery html templates

回答 8 投票 0

为什么我不能在其专业化中使用模板成员？

这是我的代码： #包括模板结构体Foo { 民众： T 数据成员； }; 模板<> 结构 Foo { 民众：空栏() { 标准::...

c++ templates c++14 template-specialization class-template

回答 1 投票 0

旧版 G++ 的常量表达式的表达式编译时检查

我有以下宏用于某些编译时检查： /* 表达式内编译时检查计算结果为 0 */ #ifdef __cplusplus 模板结构 Chk_sa; 模板 <> 结构 Ch...

c++ templates compile-time static-assert

回答 1 投票 0

用 Cython 包装 C++ 函数模板

我在 .cpp 文件中有一个 C++ 模板，定义为模板 voidrank_filter(T* in, T* out, int arr_len, int win_len, int order, Mode mode, T cval, int origin) 其中 Mode 是枚举。按照这个答案...

c++ templates cython

回答 1 投票 0

我可以在 ng-container 中使用 eventEmeter 和 *ngTemplateOutlet

我可以使用 EventEmitter 的输出在模板和父组件之间交换事件，如下例所示：我可以使用 EventEmitter 的输出来在模板和父组件之间交换事件，如本例所示： <div> <ng-container *ngTemplateOutlet=" field.field.editTemplate; context: { dataItem: field } " (validate)="validateField(field)" ></ng-container> </div> 例如模板代码为： <ng-template let-dataItem="dataItem" #EditTemplate> <div class="noselect" style="position: absolute; margin: 0px; height: 100%; width: 100%" > <input type="checkbox" [id]="'customCheckbox' + dataItem.id" [(ngModel)]="dataItem.isChecked" style="display: none" /> <label [for]="'customCheckbox' + dataItem.id" (click)="onClic()" > <i *ngIf="dataItem.isChecked; else uncheckedIcon" style="cursor: pointer; color: forestgreen; font-size: 200%" class="material-icons icons-lg" >check_circle_outline</i > <ng-template #uncheckedIcon> <i placement="bottom" style="cursor: pointer; color: rgb(0, 110, 255); font-size: 200%" class="material-icons icons-lg" >check_circle_outline</i > </ng-template> </label> </div> </ng-template> onClic(){ this.validate.emit(true) } 我已经这样做了，但是事件没有在 validateField(field) 方法中传输。我可以使用 EventEmitter 的输出来在模板和父组件之间交换事件吗是的！ Angular EventEmitter 必须在包含模板的子组件中使用。所以你可以像这样定义 EventEmitter： @Output() validate = new EventEmitter<boolean>(); 尽量不要使用 onClic 作为函数名称。使其更有意义/可读，例如 validateOnClick(); validateOnClick() { this.validate.emit(true); <---- should it always be TRUE? } 在父组件中： validateField(field: any) { console.log('Validation triggered for field:', field); } 在此处查看 NgTemplateOutlet 类型检查： https://medium.com/@thomas.laforge/ngtemplateoutlet-type-checking-5d2dcb07a2c6

angular templates output eventemitter

回答 1 投票 0

使用可变参数模板指定友元类

我正在尝试使用可变参数模板来指定友元类。我尝试使用以下语法，但它不起作用。模板结构体A { 朋友参数...； }; 我尝试鳕鱼...

c++ templates c++11 variadic-templates friend

回答 2 投票 0

模板参数推演（多参数模板）

我需要创建自己的 std::map 实现，但可以在仅使用一个模板参数创建键时推断出键的类型。模板 M 班...

c++ templates metaprogramming

回答 1 投票 0

无法将模板参数转换为传递的实际类型

这是一个完全可重现的问题 PoC，发布在 Compiler Explorer 上：https://godbolt.org/z/x78Ksro88。我遇到以下问题：编译器报告错误，因为它...