I have been following this tutorial http://reactjs.net/getting-started/tutorial.html and all works great. However in the final output source, I get the following comment tags, why is the text wrapped around the react-text tags, are they required tags? Why are they in comment tags? Can they be removed somehow?
<!-- react-text: 6 -->Hello ReactJS.NET World!<!-- /react-text -->
<!-- react-text: 9 -->This is one comment<!-- /react-text -->
The comments are needed, they're used internally by React to denote segments of text. For example, if you render two variables directly next to each other, React uses the comments to know where one variable ends and the next variable begins, so it can correctly update the text on updates.
This was changed in React v15, previous versions used <span>s to wrap the text segments. There's more information at https://facebook.github.io/react/blog/2016/04/07/react-v15.html#no-more-extra-ltspangts.
Related
In _createElement, I want to ask whether data.is is same to the v-bind:is?
https://github.com/vuejs/vue/blob/0baa129d4cad44cf1847b0eaf07e95d4c71ab494/src/core/vdom/create-element.js#L64
Why tag = data.is?
Thanks for every respondent!
As the comment in the code suggests, that line is specifically to handle the case where is is included inside an object v-bind. e.g.:
<component v-bind="{ is: 'button' }">Button</component>
You can see this for yourself by setting a breakpoint in your browser on that line. I'm using Webpack and Chrome and the relevant file appears under webpack:///./node_modules/vue/dist/vue.esm.js in the Sources tab. Quick search for _createElement and click in the margin to set a breakpoint.
In the example above the is value is intended to be used as the tag, whereas component is just a dummy tag that can be discarded.
The syntax above is equivalent to:
<component is="button">Button</component>
or:
<button>Button</button>
However, neither of these two examples will go into the relevant if section. In these other two cases the tag is already resolved correctly prior to this point.
I am using the wheelnav.js library. Some of the items in the wheel have text which needs to be wrapped onto a new line due to the length being too long.
I have tried using the <br /> html tag but it is rendered as text.
You have to use \n.
myWheelnav.createWheel(["Short text","This is a\nlong text"]);
We want to add custom fields that can be modified on the back end, yet also populate on the front end using custom fields. We have tried following, yet the fields didn't populate on the front end. See below for examples of the code and corresponding output:
Example Code
Result
How can we get these fields to properly populate on the front end?
I would start by reading the BigCommerce Stencil Documentation. The way you are calling the custom field values is not how they suggest calling these values.
The custom_fields are only accessible on the product detail page at this time in Stencil.
To display them on the product detail page, you can loop through each custom_field value with the following code.
{{#each product.custom_fields}}
<dt class="productView-info-name">{{name}}:</dt>
<dd class="productView-info-value">{{{value}}}</dd>
{{/each}}
You can check to see what values are available on each page by either reading the Stencil docs linked above, or debugging your page by removing the closing '/' and adding '?debug=bar' to the end of your localhost URL. Refresh your page and you will see all available store data in JSON format below the rendered page.
For more control over which custom field you output where you can create a reusable loop.
i.e. Create templates/components/products/custom-fields.html
{{#each product.custom_fields}}
{{#if name '===' ../custom_field}}
{{{value}}}
{{/if}}
{{/each}}
Then from your product_view.html you can specify the field value to output with a single line:
{{> components/products/custom-field custom_fields='custom field name'}}
I am trying to collect texts and images from a website to help collect missing people related tweets. Here is the problem:
Some tweets don't have images so the corresponding <div class='c' ....> has only one <div>...</div>.
Some tweets have images, so the corresponding <div class='c' ....> has two <div>...</div>, as shown in the following codes:
<div class='c' id="M_D*****">
<div>...</div>
and
<div class='c' id="M_D*****">
<div>...</div>
<div>...</div>
I intend to check whether a tweet has an image, i.e. find out whether the corresponding <div class='c' ....> has two <div>...</div>.
PS: The following codes are used to collect all the texts and image URLs but not all tweets have images so I want to match them by solving the above problem.
tweets = browser.find_elements_by_xpath("//span[#class='ctt']")
graph_links = browser.find_elements_by_xpath("//img[#alt='img' and #class='ib']")
This is a public welfare program, which aims to help the missing people go back home.
By collecting the text and the images separately, I think that it's going to be impossible to match the text with the related image after the fact. I would suggest a different approach. I would search for the <div class='c'...> that contains both the text and the optional image. Once you have the "container" DIV, you can then get the text and see if an image exists and put them all together. Without all the relevant HTML, you may have to tweak the code below but it should give you an idea on how to approach this.
containers = browser.find_elements_by_css_selector("div.c")
for container in containers:
print container.find_element_by_css_selector("span.ctt").text // the tweet text
images = container.find_elements_by_css_selector("img.ib")
if len(images) > 0 // see if the image exists
print images[0].get_attribute("src") // the URL of the image
print "-------------" // separator between tweets
The html you provided is probably not enough, but basing on it I suggest xpath: //div[#id='M_D*****' and ./div//img] which find div with specified id and containing div with image.
But answering directly to your question:
//div[./div[2] and not(./div[3])] will find all divs with exactly 2 div children
After the recent updates in Moqui I am facing a problem in rendering the FTL code using <render-mode> tag.
Let me try to explain the problem,
Earlier I have rendered the FTL code using <render-mode> in <form-list> tag it was working properly but when I took the update of Moqui, it is displaying the whole FTL code written in the tag on browser.
Also after the update of Moqui when I use the same code outside the <form-list>, it is working as expected.
Is this the desired behavior or we should do some changes at framework level.
Below is the sample code for the same.
<form-list name="demoName" list="nameList" >
<field name="name">
<default-field title="Name">
<render-mode>
<text><![CDATA[
<#if name=='Demo Name 1'>
<span class="label label-success">Demo Name 1</span>
<#elseif name=='Demo Name 2'>
<span class="label label-info">Demo Name 2</span>
</#if>
]]></text>
</render-mode>
</default-field>
</field>
</form-list>
This is how the code is being rendered on the screen at revision #891b4d5.
This was the output that we used to get in Moqui revision #983a9e1
Can we use render-mode in form-list the way we are using it in the above code snippet?
For proper usage of the render-mode.text element you should specify a text.#type attribute. It defaults to "all" so the text will be used for all types, but your content contains HTML so it should have text.#type=html.
Still, what you include should work fine. Here is an example from the apps.xml screen in the latest version of Moqui (in the git repo) that runs with every apps screen render and works with interpretation of the inline text as a template:
<render-mode><text type="html"><![CDATA[
<#assign footerItemList = sri.getThemeValues("STRT_FOOTER_ITEM")>
<div id="apps-footer-content">
<#list footerItemList! as footerItem>
${footerItem}
</#list>
</div>
]]></text></render-mode>