- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我有一组对象,我试图使用引导面板按类别显示它们。为了获取数组中的所有不同类别,我创建了一个助手,它循环遍历数组并返回一个包含所有不同不同类别的字符串数组。
这是我的两个助手:
Handlebars.registerHelper("GetFamilies", function (array) {
var families = [];
for (var i = 0; i < array.length; i++) {
var item = array[i];
if (families.indexOf(item.Family) <= -1) {
families.push(item.Family);
}
}
console.log("====================Families");
console.log(families);
return families;
});
Handlebars.registerHelper("GetFamiliyPieces", function (array, familyName) {
var result = _.filter(array, function (obj) {
// return true for every valid entry!
return obj.Family == familyName;
});
console.log("====================Family Pieces");
console.log(result);
return result;
});
这是 html:
<div class="panel-group" id="toolbox-accordion">
{{#GetFamilies pieces}}
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#toolbox-accordion" href="#{{this}}">
{{this}}
</a>
</h4>
</div>
<div id="{{this}}" class="panel-collapse collapse in">
<div class="panel-body">
{{#GetFamilyPieces pieces this}}
<div class="toolbox_item" data-type="{{TypeName}}" data-type-id="{{TypeID}}" title="{{TypeDescription}}" data-input-count="{{Length Inputs}}" data-output-count="{{Length Outputs}}">
<span id="line"></span>
<div class='typename'>{{ShortName TypeName}}</div>
</div>
{{/GetFamilyPieces}}
</div>
</div>
</div>
{{/GetFamilies}}
</div>
在控制台中,我点击了 GetFamilies Helper:
但没有点击 GetFamilyPieces 帮助器。
我渲染的 HTML 看起来像这样:
<div id="toolbox-container">
<div class="panel-group" id="toolbox-accordion">
Circuit,Component,Conductor </div>
</div>
正如您所看到的,它只是渲染数组包含的内容的逗号分隔字符串。你知道为什么完整的 html 没有被渲染吗?
最佳答案
您得到的是逗号分隔的字符串,因为这是 JavaScript 中的数组为 .toStringed 时的结果。
来自MDN :
For Array objects, the toString method joins the array and returns one string containing each array element separated by commas.
这意味着 ["Circuit", "Component", "Conductor"].toString()
结果为 "Circuit,Component,Conductor"
。
调用助手后模板的其余部分未呈现的原因是您的助手编写不正确。您的Block Helper应该返回一个包含要呈现的 HTML 的字符串。由于您的助手返回一个数组,因此会呈现该数组的 toString()
。为了访问 Block Helper 的内部模板,Handlebars 提供了一个函数 options.fn
,您可以将上下文数据对象传递给该函数。您的助手必须将数组参数中的每个项目传递给 options.fn 函数并连接结果。一个可行的实现如下所示:
Handlebars.registerHelper("GetFamilies", function (array, options) {
return array
.reduce((memo, el) => {
if (memo.indexOf(el.Family) === -1) {
memo.push(el.Family);
}
return memo;
}, [])
.reduce((memo, family) => memo += options.fn(family), '');
});
Handlebars.registerHelper("GetFamilyPieces", function (array, familyName, options) {
return array
.filter(el => el.Family === familyName)
.reduce((memo, el) => memo += options.fn(el), '');
});
请注意,在您的#GetFamilies
Block Helper 中,pieces
不一定存在于您的上下文数据中。您必须告诉 Handlebars 逐步进入上下文框架以查找路径为 ../pieces
的 pieces
。
另一种解决方案,并且根据您的助手的判断,您的目标似乎是使用标准(非 block )Handlebars Helper 。这将允许您像您所做的那样从助手返回数组,然后将结果数组传递给现有的#each block 助手。您的模板需要更改为以下内容:
{{#each (GetFamilies pieces)}}
{{#each (GetFamilyPieces ../pieces this)}}
{{/each}}
{{/each}}
关于javascript - Handlebars Helper 返回数组但呈现逗号分隔的字符串,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39536479/
是否可以将 Handlebars 预编译代码反编译为 Handlebars 模板? 可能转换成这样: function program2(depth0, data) { var buffer = ''
我知道它被问过很多次,我已经看过答案但不确定我哪里错了。 我查看了 Handlebarsjs 上的文档并遵循了教程,但两次我都遇到了同样的错误。
我有一个普通的 Handlebars 模板,我正在通过 puppeteer 生成 pdf。我能够正常地通过正文访问数据,但似乎无法在 JS 脚本标记中这样做。我的数据看起来像这样。 const con
我有一个问题,有时我想遍历的对象只是一个普通对象,但有时它是一个数组,因为我使用的是 {{#each}} Handlebars built-在助手中。 当对象是一个数组时,它工作得很好,但当它是一个普
我只是对 Handlebars 作为模板解决方案有了更好的了解,并且遇到了一个我不知道如何解决的问题。 我在我的布局中添加了部分,一个用于页眉,一个用于页脚,用于从我的 View 中动态插入脚本。但是
在我的 Handlebars 模板中,我检查变量是否存在,如果存在则呈现一些文本: {{#if foo}} some text {{/if}} 如果 foo 是文本或者 foo 是数字但不是零,这
所以我已经阅读了关于 Handlebars partials 的官方文档. 它指出: In order to use a partial, it must be registered via Hand
我有一个“国家/地区”对象,我将其作为 Handlebars 上下文的一部分传递: { 'hk': {'name': 'Hong Kong', 'someotherprop': 'someother
我有一个广泛的新闻源 (JSON),但我只需要在主页上向用户显示前三个新闻。有没有办法从第四个开始丢弃?比如: {{#each news}} {{ if index {{title}} - {{d
使用动态部分时有没有办法进行部分故障转移? Handlebars partials documentation 显示动态部分,并且只显示带有硬编码部分名称的故障转移。 最佳答案 这里有一个 githu
我有一个像这样的文件夹结构: - components/ - foo/ - index.js - foo.handlebars - foo.scss - bar/
我采用了一个带有 Handlebars 的项目,但遇到了让 handlebars 在客户端呈现模板的问题。 基本上,目前的设置方式是模板在服务器端呈现。我现在正处于需要能够使用以下方法在 AJAX 响
如何手动使用预编译的 handlebars.js 模板? 假设,我们有 source = "Hello, my name is {{name}}" data = { name: "Joe" } 目前,
我正在使用 Handlebars 的运行时构建并尝试使用已注册的部分。我愿意: Handlebars.registerPartial("path/partialname", Handlebars.te
我正在使用 Handlebars 在服务器端渲染代码(无角度/ Ember ) 我还能以某种方式拥有一些东西吗:{{{content}}} 我只想在bolean为true的情况下才拥有CSS类 类似于
在 Handlebars 2+ 中,如何在这样的循环中动态读取属性? objects是一个对象数组。 keys是一个字符串数组。我想为每个对象循环每个键并放置它的 .foo span 中的值. {{#
我正在尝试创建一个表,该表使用来自JSON文件的对象填充每个表单元格。我的 Handlebars 模板只为每个对象添加了数据。我想完成的是为第5个项目创建一个新行,然后继续填充表格单元格,直到第10个
例如,您可以看到 {{{body}}} 并且在模板中,您可以执行类似 {{data.page.hero.text}} 的操作 有什么我们应该注意的显着差异吗? 最佳答案 Handlebars HTML
我有两个使用的 Handlebars helper 。 首先是 timeboundset ,它接受一个数组和一个日期字段,并且仅选择和应用落在该日期字段之后的那些元素。 第二个是 sortedset
是否可以在 Handlebars 条件中使用全局变量?我正在编写一个列出很多对象的应用程序,我希望用户能够控制列出哪些详细信息。例如,在人员列表中仅显示名字,如下所示: {{#each people
我是一名优秀的程序员,十分优秀!