我正在尝试制作一个半可重复使用的小部件,但我遇到了一个问题.我试图在阴影根中封装一些CSS代码,这样它就不会影响网页的其余部分,但是这个CSS用于多个小部件,所以我试图包含一个远程样式表.我找到的所有例子都没有使用远程样式表,我想知道这是否可行.
EX:
<template id="templateContent">
<head>
<link rel="stylesheet" href="css/generalStyle1.css">
</head>
<body>
<div class="affectedByGeneralStyle1"></div>
</body>
</template>
用于包含模板的脚本:
<div id="host"></div>
<script>
var importedData = (html_import_element).import.getElementById("templateContent");
var shadow = document.querySelector('#host').createShadowRoot();
var clone = document.importNode(importedData.content, true);
shadow.appendChild(clone);
</script>
我有这种情况,我正在尝试<template>在我的html源代码中使用该标记:
<template id="some-id">
<div id="content-container">
<span>{{some_string}}</span>
<div>
</template>
这最终将模板放在文档中,但不认为它在DOM中.这意味着在支持模板标记的浏览器中找不到$("#content-container").如果我搜索:
$("#some-id")
我得到了回报:
<template id=?"some-id">?
#document-fragment
<div id="content-container">
<span>{{some_string}}</span>
<div>
</template>?
这些都不会让我感到惊讶.我需要知道的是克隆文档片段的内容并拥有一个新节点,然后我可以将其放在我想要的DOM中.
我已经找到了如何使用jQuery实现这一点的示例,但是围绕这些内容的大部分代码已经在使用jQuery,我需要知道如何使用jQuery来执行此操作.
我的第一个想法是获取html,然后使用它来创建一个新节点:
stuff = $("#some-id").html()
new_node = $(stuff)
这会导致以下错误:
Error: Syntax error, unrecognized expression: <the html string>
我不知道错误是否是由胡子语法引起的.我认为必须有一个jQuery解决方案来解决这个问题,但是当我用Google搜索时,我得到了jQuery模板的大量命中,这是不同的.
有没有人有想法,答案或指向网站/页面的指针,可以帮助我完成这项工作？我试图避免拼凑一些hackish.
编辑:我最终找到了这个解决方案(我还在测试它,以确保它是一个解决方案,但它看起来很有希望);
template = $("#some-id")
content = template.html()
new_div = $("<div></div>")
new_div.html(content)
我最终得到了我以前不需要的div,但我可以忍受.但这种感觉很糟糕.有没有人有更好的方法呢？好处是它仍然可以在尚未完全适应模板标签行为的浏览器中运行.
谢谢!
这工作:
{% get_option 'payment_conditions' '' true %}
它调用一个带有3个参数的函数,它返回一个字符串:"我就是条件".大.
我现在要做的是把它放在IF语句中.所以要做到这一点,我需要将值转换为变量.就像是:
{% with conditions = get_option 'payment_conditions' '' true %}
但它不起作用.我也尝试过:
{% get_option 'payment_conditions' '' true as conditions %}
有没有办法可以将结果放入变量？谢谢
我有一个我放置的模板,比方说5个表单,但除第一个表单外,所有禁用都被发布.如果我单击首先启用它的按钮,则只能填写下一个表单.
我正在寻找一种方法在验证测试中的for循环中实现类似Django的forloop.last templatetag变量,以决定是否执行启用下一个表单的方法.
基本上我需要做的是:
for form_data in step.hashes:
# get and fill the current form with data in form_data
if not forloop.last:
# click the button that enables the next form
# submit all filled forms
使用Polymer 1.0,我创建了一个纸质抽屉面板布局.在抽屉里,我有一个使用纸质菜单的菜单,纸质菜单被绑在铁页上.我从Content Switcheroo使用Core-Pages - Polycasts#09获取此示例并将其转换为使用Polymer 1.0元素.在下面的代码中,您可以看到我的评论部分,其中纸质项目是硬编码的.这很好用.
我的下一步是尝试动态构建我的菜单,使用该<template is="dom-repeat">元素迭代任意数组的菜单项.菜单正确呈现(我可以看到绑定到数组的所有菜单项),但我无法点击这些项目,也没有显示铁页面.似乎用于attr-for-selected的data-category属性在内部不起作用<template is="dom-repeat">.
我可以通过哪些方式实现这一目标？编辑:删除attr-for-selected属性并使用索引工作切换铁页,但在我的情况下,依赖于数组的索引不是一个选项.
我的index.html如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>My Test</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/iron-pages/iron-pages.html">
<link rel="import" href="bower_components/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/paper-item/paper-item.html">
<link rel="import" href="bower_components/paper-styles/paper-styles.html">
<link rel="import" href="bower_components/paper-menu/paper-menu.html">
<style>
</style>
</head>
<body>
<my-app></my-app>
<dom-module id="my-app">
<style>
</style>
<template>
<paper-drawer-panel> …我正在将动态内容（从数据库）拉到模板中。您可以将其视为一些简单的 CMS 系统。内容字符串包含模板变量。就像这个（简化的情况）：
vars['current_city'] = "London"
vars['content'] = 'the current city is: {{current_city}}' #this string comes from db
return render_template(request, 'about_me.html',vars)
然后在模板中：
{{content}}
输出明显：
当前城市是：{{current_city}}
预期：
当前城市是：伦敦
我的问题 - 有没有办法在另一个变量中呈现变量名称？使用自定义模板标签/过滤器似乎是一个好主意，但我试图创建一个但没有成功......有什么想法可以解决这个问题吗？
我最近一直在阅读一些django代码，并且标签Templatetag被大量使用：
{% templatetag openblock %} block page_title {% templatetag closeblock %}
Page Title
{% templatetag openblock %} endblock page_title {% templatetag closeblock %}
与下面的较短语法相比，有什么优点：
{% block page_title %}Page Title{% endblock %}
文档说templatetag可用于：
openblock {%
closeblock %}
openvariable {{;
closevariable }};
openbrace {;
closebrace };
opencomment {#;
closecomment #};
对我来说，它只会使代码更长，那么在哪种情况下我应该使用它呢？
I am using a model form, and I have rendering that form in the template as below.
<table>
{{form.as_table}}
</table>
但问题是，它将所有字段渲染为行。由于我的模型包含 200 多行，因此当将元素显示为 200 行时，看起来很糟糕。我想将它们分成 5 列，因此总行数约为 40-43 行。是否有任何内置模板标签可用于此或任何其他方式，我们可以使用它来解决问题。
templatetag ×8
django ×5
python ×3
templates ×2
css ×1
django-forms ×1
filter ×1
for-loop ×1
html ×1
html5 ×1
jquery ×1
lettuce ×1
polymer ×1
polymer-1.0 ×1
render ×1
shadow-dom ×1
stylesheet ×1
syntax ×1