When using Handlebars templates to generate output, proper indentation is important to make the output readable. I can not get the correct indentation to display a nested data structure, such as a JSON object.
Suppose you have a JSON object like this:
{
"type": "object",
"name": "one",
"children": [
{
"type": "object",
"name": "two",
"children": [
{
"type": "scalar",
"name": "three",
"value": "3"
},
{
"type": "object",
"name": "Deep",
"children": [
{
"type": "scalar",
"name": "four",
"value": "4"
},
{
"type": "scalar",
"name": "five",
"value": "5"
}
]
}
]
}
]
}
And you want to generate output using the following Handlebars template:
{{!
========================= object ===============================
}}
{{#*inline "object"}}
{{name}}: {
{{#each children}}
{{> "json"}}{{#unless #last}},{{/unless}}
{{/each}}
}{{/inline}}
{{!
========================= scalar ===============================
}}
{{#*inline "scalar"}}
{{name}}: {{value ~}}
{{/inline}}
{{!
========================= json ===============================
}}
{{#*inline "json"}}
{{#switch type}}
{{#case 'object'}}{{> "object"}}{{/case ~}}
{{#case 'scalar'}}{{> "scalar"}}{{/case ~}}
{{/switch}}
{{/inline}}
{{!
========================= main =================================
}}
{{> "json" this}}
The output you get is:
one: {
two: {
three: 3,
Deep: {
four: 4,
five: 5
}
}
}
Note the lack of proper indentation. How can I resolve the problem and have the output formatted correctly?
PS. I got used to the StringTemplate library where you have the proper indentation without any additional effort. Is it possible to get the same result from Hanbdlebars without resolving to other helpers, explicit indent evaluations, and so on, as I found in some older posts?
Explicit solution with additional helpers
PS. JSON is used to illustrate the problem with the recursive templates, I do not need to print JSON objects.
Related
I am trying to categorize by the failed test result in various categories using the categories.json file. I am using following JSON file:
[
{
"name": "Ignored tests",
"matchedStatuses": ["skipped"]
},
{
"name": "Infrastructure problems",
"matchedStatuses": ["broken", "failed"],
"messageRegex": ".*An unknown server-side error occurred.*"
},
{
"name": "Outdated tests",
"matchedStatuses": ["broken"],
"traceRegex": ".*FileNotFoundException.*"
},
{
"name": "Test defects",
"matchedStatuses":[
"broken",
"Element is not currently visible and may not be manipulated"
],
"traceRegex":[
".*Cannot read property.*",
".*is not in DOM or there is no element.*",
".*is not a function.*"
]
},
{
"name": "Element Not visible",
"traceRegex":[
".*still not visible after.*",
".*Element is not currently visible and may not be manipulated.*",
".*was not found by text|CSS|XPath.*"
]
},
{
"name":"Promise Rejected",
"traceRegex": [".*Promise was rejected with the following reason.*"]
}
]
and in the allure report and getting only Product Defects.
This is how it looks
I am using
allure: 2.8.1
codeceptjs: 1.4.6
appium: 1.8.2
You have wrong categories.json file format (traceRegex expected to be a string). If you want to have multiply matchers per category, simply use the same name:
[{
"name": "Element Not visible",
"traceRegex": ".*still not visible after.*"
}, {
"name": "Element Not visible",
"traceRegex": ".*Element is not currently visible and may not be manipulated.*"
}]
In addition to Dmitry Baev's answer you can always use "|" - Regex Alternation Operator (| or |)
In your case it would look as follows:
{
"name": "Element Not visible",
"traceRegex": "(.*still not visible after.*)|(.*Element is not currently visible and may not be manipulated.*)|(.*was not found by text|CSS|XPath.*)"
}
which can be further simplified to:
{
"name": "Element Not visible",
"traceRegex": ".*(still not visible after)|(Element is not currently visible and may not be manipulated)|(was not found by text|CSS|XPath).*"
}
These two questions are all about the AdaptiveCard Botframework.
Q1: I have set the default placeholder value in the adaptivecard :text1, but after triggering the event, the placeholder cannot be displayed correctly , the placeholder was blank. There is no hint information(text1) in the placeholder. And even I copied the MS sample code to my source, it still not working. I have tried in the Chrome the Firefox and also in IE11, but all failed.
The placeholder was blank
MS samplecode
MS sample linkage
Q2: I have set the width for two columns in the columnset using the adaptivecard(one was set as 40 and another one was set as 10), but it seems not working. The grid was not displayed correctly.
My source
Width limit seems not working
[
{
"contentType": "application/vnd.microsoft.card.adaptive",
"content": {
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "TextBlock",
"text": "Test",
"weight": "bolder",
"size": "medium"
},
{
"type": "ColumnSet",
"spacing": "none",
"columns": [
{
"type": "Column",
"width": 40,
"items": [
{
"type": "Input.ChoiceSet",
"id": "country",
"style": "compact",
"placeholder": "Country",
"value": "1",
"choices": [
{
"title": "UnitedStates",
"value": "US"
}
]
}
]
},
{
"type": "Column",
"width": 10,
"items": [
{
"type": "Input.Number",
"placeholder": "text1",
"min": 0,
"id": "Text1"
}
]
}
]
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Button"
}
]
}
}
]
Q1:
The placeholder value is rendered depending on the host renderer. What you can see in this image, is a comparison of several different hosts, and you can see that two of them do render the placeholder.
Q2:
The columns are correctly set and the columnset does render correctly.
What you can see here is that columns width in numeric format is a % of overall width, after auto and stretch column widths have been taken into consideration
In the following, your first column is set to Auto, and the second remains at 10
The second column takes up the entire space because AUTO brings the first column to the slimmest width it can be rendered at.
Visualisers in different hosts may show this differently, but the certainly are intended to be the same regardless of the host.
Hope this helps.
I'm attempting to get an external CSS file to load in Chrome. To do this, it would seem I have to edit an existing Chrome extension's manifest.json file and minimally add the following to the content_scripts node:
{
"css": [ "Theme.css" ]
}
From what I understand, this will add the Theme.css file (which is in the same root directory as the manifest.json file) to all pages accessed in Chrome. I saw that I could additionally qualify the json block by including a matches key-value pair, but I've omitted that here.
This doesn't appear to be working because I'm not seeing the styles. To start, my Theme.css file contains this:
span {
color: green !important;
}
Additionally, I've confirmed that the extension I added it to (AngularJS Batarang FWIW) is recognized as "Enabled" by Chrome.
I also tried the solution explained here where you load the CSS as an accessible resource via a JS file, but that doesn't work either.
What am I missing? Or is there an easier way to do this?
FWIW: here is the entire manifiest:
{
"background": {
"scripts": [ "background.js" ]
},
"content_scripts": [ {
"js": [ "inject.js" ],
"matches": [ "<all_urls>" ],
"run_at": "document_start"
}, {
"matches": [ "http://*/*", "https://*/*"],
"css": [ "Theme.css" ]
} ],
"description": "Extends the Developer Tools, adding tools for debugging and profiling AngularJS applications.",
"devtools_page": "devtoolsBackground.html",
"icons": {
"128": "img/webstore-icon.png",
"16": "img/webstore-icon.png",
"48": "img/webstore-icon.png"
},
"key": "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC9hsXx3+F75DyGto3mkm0FB2sycQzyMqXQAySn2Qj67vIHFMSrVZ0ItPzGnWJwoRoaDI7cQF9c/WLDpLJQwGe5CV5z84MueOME3e45JJEwN+YsW5ufEavmp+pk1c9h/Wyi8bMoSWJGIrOG72wCTFOdnyN6nocA0dm4w7UWsxLLEQIDAQAB",
"manifest_version": 2,
"minimum_chrome_version": "21.0.1180.57",
"name": "AngularJS Batarang",
"page_action": {
"default_icon": {
"19": "img/icon19.png",
"38": "img/icon38.png"
},
"default_title": "AngularJS Super-Powered"
},
"permissions": [ "tabs", "<all_urls>" ],
"update_url": "https://clients2.google.com/service/update2/crx",
"version": "0.10.6",
"web_accessible_resources": [ "dist/hint.js" ]
}
You have a problem with your content_scripts key, you should wrap your matches, css and js together under content_scripts key, like this:
"content_scripts": [
{
"matches": ["http://*/*"],
"css": ["./Theme.css"],
"js": ["./inject.js"]
}
],
Also, don't forget to write ./ before your CSS/JS File to point to your root directory!
You did not register any pages to apply the CSS file to. The matches section is required.
If you want to apply it to all pages, use "matches": ["<all_urls>"]
I have a set of notebooks with metadata elements set at the cell level to define different sorts of activity.
For example, in the following .ipynb file there is a metadata element commentate set to true that is dynamically styled using a custom notebook extension to show a coloured background.
{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": [
"#Header\n",
"\n",
"..and some markdown."
]
},
{
"cell_type": "markdown",
"metadata": {
"commentate": true
},
"source": [
"Metadata styled markdown."
]
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 3",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.4.0"
}
},
"nbformat": 4,
"nbformat_minor": 0
}
I would like to generate a correspondingly styled HTML version of this notebook using nbconvert.
Is there a way I can map ipynb cell level metadata elements onto a CSS class and then associate a custom CSS file with, or embed custom CSS elements in, the generated HTML file?
Alternatively, is there a simple pattern for translating cell level metadata attributes/values to associated custom styled elements in converted HTML?
Why in component
var matrix = new enyo.Control({
name:"Matrix",
tag: "div",
classes : 'strategies',
/*handlers: {
init: "initHandler"
},*/
components: [
{ tag: "div", classes: "blankblock", content: ' ' },
{ tag: "div", classes: "label1", content: 'Player A' },
{ tag: "div", classes: "label2", content: 'B' },
{ name:'matrixTable', tag: "table", components: [
{ name: 'tr1', tag: 'tr', components: [
{ tag: 'td', components: [{tag: 'input'}]},
{ tag: 'td', components: [{tag: 'input'}]}
]},
{tag: 'tr', components: [
{tag: 'td', components: [{tag: 'input'}]},
{tag: 'td', components: [{tag: 'input'}]}
]}
]} ,
{ name: 'addV', tag: "button", classes:'addV', content: "+", ontap: "addRow" },
{ name: 'addH', tag: "button", classes:'addH', content: "+", ontap: "addColl" }
],
addRow: function(inSource, inEvent){
this.$.matrixTable.createComponent
alert(this.$.matrixTable.$.toSource());
},
addColl: function(inSource, inEvent){
}
});
this.$ include all components, even those with nesting order 2
I expect
this.$.matrixTable.$.tr1
but I have
this.$.tr1
Because you declared them as part of the Matrix kind then Enyo will have them all owned by the Matrix kind. If you want them to be owned as you described then you need to break out the MatrixTable kind into its own separate kind. If you want to enforce that encapsulation then you need to create a kind to hide it.
Further, you should always avoid going two levels deep into a kind. In other words, this.$.matrixTable.$.tr1 would be bad form. Make properties or add functions to return values.
In enyo you need to be aware of two chains: owner chain vs parent-child chain.
Whereas "matrixTable" is a parent of "tr1", an owner of "tr1" is "Matrix".
So to get to "tr1" from "Matrix", you can go two ways:
this.$.tr1 or this.children[3].children[0],
similarly, to get to "Matrix" from "tr1" you can do:
this.$.tr1.owner or this.$.tr1.parent.parent
This way, no matter how deeply nested are your components, the owner will always be the kind within which the component is defined.