How I can output the contents of an extends block inside of a mixin?
This is a simplified example:
mixins.jade
mixin form()
form
block
layout.jade
include mixins.jade
body
+form
block content
somepage.jade
extends layout
block content
input(type=text)
Here I would like to achieve:
<form>
<input type="text"></input>
</form>
But currently all I get is:
<form></form>
Try something along these lines:
layout.jade
doctype 5
head
title "Title"
body
block content
include mixins.jade
+form
block
SomePage.jade
extends layout
block content
input(type=text)
The fact that did not work was identified as a bug after I had created a GitHub issue and submitted a failing spec.
Per this pull request it's now possible to do what I described in my original question but as stated, this currently only works in the development branch of Jade and will be a part of the next release.
Related
Fairly basic question as I'm going back to webdev after a few years away so experimenting.
I want to create a reusable component that wraps an error message in a formatted element:
I'd call it in my partial as...
<x-error :blah="$woof"/>
The component code would be something like this:
#error('field') "nicely formatted message" #enderror
However, I want to be able to dynamically set the field name within for the error directive, something like:
#error($field) or #error({{ $field }}) "nicely formatted message" #enderror
...while in the executing partial it would be called through something like:
<x-error :field='email'> or <x-error :field='password'> or <x-error :field='description'> or whatever field name you like.
After spending way too long trawling the web for clues I'm starting to suspect this isn't possible.
Is it? If so how do you do it? Any help or clues gratefully received
Cheers!
The answer is embarrassingly simple: leave off the semicolon! The semicolon kinda acts like a pointer to a variable, rather than passing the data directly to the component, so instead of:
<x-error :field="$title" />
It should be :
<x-error field="title" />
In the component you merely call the variable name:
#error($field)
"nicely formatted message"
#enderror
Easy, init?
If I understand the docs correctly it allows
<div>
<div id="alert"></div>
<button hx-get="/info"
hx-select="#info-details"
hx-swap="outerHTML"
hx-select-oob="#alert">
Get Info!
</button>
</div>
replace the whole <button> due to the hx-swap directive with the content of #info-details - via hx-select="#info-details" - from the response sent.
define a 2nd target hx-select-oob="#alert" which takes the content from #alert from the response sent.
Is there any way hx-select-oob can have multiple targets?
Like hx-select-oob="#alert,#second-target"?
Or how to manage updating multiple targets at once?
If your goal is to return html content and copy the same content to multiple targets - you simply use class selector instead of ID.
If you have multiple content returned, then you need to use htmx-swap-oob
I am writing a custom TagHelper that should change its behavior based on what child elements its owner tag has. This will be used for substituting custom html elements in a localized string.
Here's a simple example of what I'm trying to do:
<h2 locale-key="Hello, %1!">
<span class="bold" locale-parameter="1">#userName</span>
</h2>
In the example above, the TagHelper for LocaleKey will change the content of the <h2> tag to a localized string. If this is a simple string with no parameters, then I can just simply use output.Content.SetHtmlContent() in the TagHelper to set the h2's content to the string. However in this case, the localized string has a parameter (%1), and I want the corresponding child element (<span parameter="1">) to be substituted in the final output. So the final rendered html would look like this:
<h2>Hello, <span class="bold">Lázár Zsolt</span>!<h2/>
To achieve this, I should be able to see all the child elements in the DOM from the LocaleKey TagHelper, so I can generate the correct HTML code. In the TagHelper's ProcessAsync method I can access the TagHelperContext and the TagHelperOutput, but I couldn't find any information about child elements in either of these objects while debugging. Is this possible somehow?
Another approach is to leave the string as is, with the %1 parameter key, and then use the child ParameterTagHelper to substitute itself into the parameterized string. To do this, I'd have to see the siblings of the current tag from the TagHelper.
Recursion would also be fun (e.g. the <span> is also localized and has its own parameters), but for the scope of this question, I'd be happy if I could get this to work without recursion.
I posted too soon again... There is a GetChildContentAsync() method in TagHelperOutput that will... get the child content asynchronously.
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'm working with Prestashop 1.6 and I need to add a checkbox and text field in the order summary page, as shown below.
I'm lost on which hooks to use to do so. These fields should be also shown in the invoice. For the hook of the invoice I believe it is the DisplayPDFInvoice hook, but for the order summary (display and get information) I don't know which hooks to use.
Can you give me some tips? Thanks for any help
You can use hook hookDisplayBeforeShoppingCartBlock to render any content on cart summary page. Don't forget to register this hook to your module.
I have tried using the same and got the results as below:
Code:
public function hookDisplayBeforeShoppingCartBlock()
{
return '<div>Text Area : </div><textarea rows="3" cols="30">This is a text area rendered from hookDisplayBeforeShoppingCartBlock</textarea><br><br><input type="checkbox" name="vehicle" value="Bike">checkbox 1<br><input type="checkbox" name="vehicle" value="Car">checkbox 2';
}
The above code is used just to show an example, you can render any template file from there. As you can see that this hook renders content above cart block so you can use javascript to move it below cart block.