问题标签 [soy-templates]

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.

0 投票
1 回答
1393 浏览

javascript - 如何在大豆模板中获取子字符串?

我有大豆模板,如果长度超过 30 个字符,我只需要 28 个字符?怎么得到?

但是在编译时它会抛出异常,

0 投票
1 回答
216 浏览

javascript - Jive 主题中的 JSZip

有没有人在他们的 Jive 主题中实现了 JSZip ?我无法实例化 JSZip 对象。这是设置:我有一个 Jive 主题,在脚本文件夹中有一些自定义 JS 文件。JS 文件通过 javascript.soy 模板中的脚本标签包含,如下所示:

/*javascript.soy*/ <script src="{themeUrl('/scripts/carousel.js')}"></script> <script src="{themeUrl('/scripts/jszip.min.js')}"></script> <script src="{themeUrl('/scripts/our-theme.js')}"></script>

our-theme.js 尝试像这样实例化一个新的 JSZip 实例:

var zip = new JSZip();

浏览器抛出“ReferenceError: JSZip is not defined”的错误(在 firebug 或 Chrome 开发者控制台中可见)。这很奇怪,因为我可以通过 Firebug 或单击“查看页面源代码”查看脚本文件,我可以验证具有 JSZip 定义的 jszip.min.js 的正确脚本标记是否已生成并且可以访问。

我能够调用其他外部 JS 文件中的函数,所以我唯一能想到的就是我错误地实例化了这个对象。根据 JSZip 文档:

对于浏览器,有两个有趣的文件:dist/jszip.js 和 dist/jszip.min.js(只包括一个)。如果您使用 AMD 加载程序(例如 RequireJS),JSZip 将自行注册:您只需将 js 文件放在正确的位置,或配置加载程序(请参阅此处了解 RequireJS)。如果没有任何加载器,JSZip 将在全局范围内声明一个名为 JSZip 的变量。

我没有使用 RequireJS。所以 JSZip 应该注册为一个全局变量,但我无法访问它并且在窗口集合中看到它。

我浏览了社区,但看不到其他任何人使用 JSZip 和 Jive,但我认为尝试并没有什么坏处:)

0 投票
1 回答
527 浏览

css - Confluence 插件:如何将 CSS 标记放入 soy 插件中?

我有一个工作正常的大豆文件,除了我想要应用的 CSS 样式被忽略。

我怀疑 CSS 文件在加载时没有导入到页面中。

这是我的行,css样式称为'urlwidth'

css 文件看起来像这样......(simplebp.css)

我想我打算像这样在 soy 文件中添加一个资源行......

我只是不确定要放入 webResourceManager_requireResource 的语法是什么。

0 投票
1 回答
1220 浏览

google-closure-templates - 如何在谷歌闭包模板(大豆模板)中声明和更新变量

让我们采用 2 个数组arr1 = ['a', 'b', 'c']arr2 = ['1' , '2', '3']。当将这些数组作为参数传递给大豆模板时,我想如下所示进行迭代并打印一个指示到目前为止迭代的总项目的索引。

由于使用let声明的变量不能重新分配给新值,模板中有没有办法实现我上面显示的逻辑。

0 投票
1 回答
485 浏览

html - 如何在 Closure 模板(大豆)中向 HTML 节点添加多个 CSS 类?

在一个模板中,我需要为一个 div 分配多个 CSS 类。

但是,当我尝试以下类似操作时,Closure 编译器似乎只将第一个类括在引号中,导致浏览器忽略其余部分。

DOM 结果

我尝试将整个内容用引号括起来(有和没有{literal})......没有成功。

0 投票
1 回答
1302 浏览

html - 如何使用大豆模板渲染 tr?

我有这个大豆模板

我想做类似的事情

但这导致

最好的方法是什么?

0 投票
1 回答
1495 浏览

templates - 更新用 let 声明的大豆模板中的值

我有一个值与来自我需要在我的大豆模板中显示的配置文件的标志相关联。它是真还是假。

如果为真,则该值需要为“x”(例如,但它是一个字符串)如果为假,则该值需要为“”(空)

请注意,我无法从我的配置中传入 true 或 false 值。我也不能省略 false 的值,它必须提供一个空字符串。

我尝试过使用 let 的各种形式的 if 语句,但根据我对文档的解释,无法更改用 let 声明的值(这没有意义)

这基本上是我需要的:

然后我将在我的模板中使用 $myVar。但是,每当我尝试这样做时,都会收到此错误:

我能做些什么!?

0 投票
1 回答
107 浏览

web - Google 闭包模板变量变量

情况:

context包含诸如 testExecutionKey1、testExecutionKey2 .. testExecutionKey10 等字段

我想检查它们是否为空,但要以好的方式进行 - 在 for 循环中

我需要在循环内访问 $context.testExecutionKey1..10 ,其中数字是 $i

问题:

PHP 具有可变变量功能,但我在文档中找不到类似的闭包模板。

0 投票
1 回答
34 浏览

html - 涉及 Closure 命令和“text-align:justify”的奇怪行为

我在大豆模板中有一些 div,我希望它们水平分布均匀。

这是有效的:

CSS(本示例简化了命名法):

::after 规则只是添加了一个假的最后一行,因为 justify 不适用于最后一行。

HTML(在大豆模板中):

达达!这就是它的样子(添加了边界坚固性,使其更清晰):

在此处输入图像描述

JSFiddle 演示了这一点:http: //jsfiddle.net/ULQwf/1257/

这是问题所在:

如果我将 div 粘贴在任何 Closure 命令中(if、for 等),如下所示:

a、b、c div 将全部落入左侧的默认内联块行为。看起来像这样:

在此处输入图像描述

更奇怪的是,如果我把所有东西都放在一起,就像这样:

a、b、c div 将继续默认向左。在内联行的剩余空间中,1、2、3 个 div 将非常合理:

在此处输入图像描述

如果我颠倒顺序,将常规 div 放在首位,然后将 Closure div 放在第二位,那么结果非常相似,但是 a、b、c 将集中在右侧而不是左侧。


浏览 Chrome 上的开发者工具,每个 div —— a、b、c、1、2、3——看起来完全一样。相同的计算值。

另一点——所有其他文本对齐值都有效。如果我将 justify 更改为 text-align:center,所有六个 div 将很好地放在中心。相同的文本对齐:左/右/等..

关于模板和证明是如何计算/编译的,有什么我不理解的吗?闭包命令会产生某种隐藏的隐藏周围 div 吗?

0 投票
1 回答
210 浏览

liferay - How to create simple data presentation portlet for liferay 7.0?

I need to create simple data presentation portlet for new version of liferay, but can't really find the proper way.

I created backend with service builder and added custom methods for listing, adding, etc. Created mvc portlet based on this tutorial [https://dev.liferay.com/develop/tutorials/-/knowledge_base/7-0/updating-the-view] and it works, but there is some problems: - It is based on deprecated alloyUI and I wan't to move it to soy/metal.js (don't have any experience with any of them), - result table should have sorting/filtering capabilities, server side probably because it have to be compatible with WCAG so I wan't to keep html and js as clean as possible.

If I understand properly, I need to replace this part below for something that works with metal.js and soy?

How is sorting/filtering implemented in liferay-7.0? Do I have to use management bar or is it possible to allow users to sort by column (clicking on column header).