Using handlebars is it possible to pass a sting from one partial to another in this manner:
Parent Template
<div class="two-col">
{{>text-field parentclass="two-col__"}}
{{>text-field parentclass="two-col__"}}
</div>
Child Template
<div class="{{parentclass}}text-field">
{{>atoms-labels}}
</div>
Child of that Child
<label class="label">Label Text</label>
Will result in
<div class="two-col">
<div class="two-col__text-field">
<label class="label">Label Text</label>
</div>
</div>
However, I would like to have a placeholder for a "parentclass" name in the label, in case another block (using Atomic Design here) wants to pull in that element. It would be perfect if {{parentclass}} could always be used (instead of having to come up with different placeholder names every time). However, the scope of passing down the string does not stop at the first child, it will go all the way down to the end.
So
<div class="two-col">
{{>text-field parentclass="two-col__"}}
{{>text-field parentclass="two-col__"}}
</div>
+
<div class="{{parentclass}}text-field">
{{>atoms-labels}}
</div>
+
<label class="{{parentclass}}label">Label Text</label>
=
<div class="two-col">
<div class="two-col__text-field">
<label class="two-col__label">Label Text</label>
</div>
</div>
Is there a way to limit the scope of that variable to be passed down only to the immediate descendant?
Related
I have an html code with contains
<div class="form-card">
<h2 class="fs-title" test-data="area_1">
About DigCompEdu
</h2>
<p></p>
<label for="academic_teaching" class="question" test-data="question_1">
<b>1- </b>
</label>
<small id="academic_teachingHelp" class="form-text text-muted">
</small>
<div class="form-check question-form-check ">
<div class="row">
<div class="col-1">
<input class="radio" type="radio" value="0" id="3" name="2" test-data="answer_1" />
</div>
</div>
So, I have h1 with testdata name after that i have a form, this form contains question with multin check radio .. i want to access this check , not by just call ([test-data="answer_2"])
because i have another tips and don't want to check them as this one ,
i did smth like this but it's not working :
cy.get('[test-data="area_1"]~[test-data="answer_2"]').check({force: true})
Any one have another idea ?
It might be the ~ between the selectors, I haven't seen that before.
Does it work with a space between instead?
cy.get('[test-data="area_1"] [test-data="answer_2"]').check({force: true})
If the heading is followed by the form like this
<h2 class="fs-title" test-data="area_1">
About DigCompEdu
</h2>
<div class="form-check question-form-check ">
...
then you would query like this
cy.get('[test-data="area_1"]')
.next('.form-check') // next element on page
.find('[test-data="answer_2"]') // this looks inside '.form-check'
.check({force: true})
I have created a slider as in input field. I am not able to get its value in formGroup. I am stucked.
My code:
<form [formGroup]="Form" novalidate (ngSubmit)="BasicDetail(Form.value)>
<div class="col-md-8">
<div class="drags">
<input class="ex6" type="text" data-slider-min="0" data-slider-max="10" data-slider-step="1" data-slider-value="5"/>
</div>
</div>
</form>
Help needed.
Make sure input is slider type, meaning range
type="range"
If you're going to create a submit form fucntion where you feed your form, then it's template-driven, so get rid of your formGroup property, (assuming this is what you want since you've shown no effort on the component.ts side)
Give your form a reference form
<form #form="ngForm" novalidate (ngSubmit)="BasicDetail(form.value)">
Create a button to submit
<button class="btn btn-primary"type="submit"> Submit </button>
Make sure to give your form input a name, and assign it ngModel
If you want also direct access, create a two-way binding, say with variable called rangeValue
[(ngModel)]="rangeValue"
Make sure you're actually using real range input types, I don't know where you got data-slider from
<form #form="ngForm" novalidate (ngSubmit)="BasicDetail(form.value)">
<div class="col-md-8">
<div class="drags">
<input class="ex6"
type="range"
min="0" max="10"
step="1"
name="someRange"
[(ngModel)]="rangeValue"
ngModel/>
</div>
</div>
<button class="btn btn-primary"type="submit"> Submit </button>
</form>
Inside your component.ts, declare variable and try to log it on submit
rangeValue = 5;
constructor( ) {}
ngOnInit() {
}
BasicDetail(form: any) {
console.log(this.rangeValue);
console.log(form.someRange);
}
I got a problem with displaying values inside "main" loop
my code looks like this:
{{# each movies}}
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<!--<img src="..." alt="...">-->
<div class="caption">
<h3>{{this.title}}</h3>
<p>Rating :
{{#each ../ratings}}
{{this}}
{{/each}}
</p>
<p>Genre: <b>{{this.genre}}</b></p>
<p>{{this.description}}</p>
<p>Modify Delete</p>
</div>
</div>
</div>
{{/each}}
And the problem is that I get all three values of "ratings" list inside the same block, but I want to get them separately one per each of movies. Any suggestions? Thank you in advance.
I needed to change my model and include rating field to it. So I didn't need the second each loop at all.
I am trying to create filter menus that list the input values of template variables (t-v) from all children within a parent. I use EVO.
Here the setup:
Parent (1)
child (a)
t-v-1 (input value: car)
child (b)
t-v-1 (input value: house)
child (c)
t-v-1 (input value: boat)
The filter menu on front-end should show then:
"Filter menu:
t-v-1"
O car
O house
O boat
So basically the filter menu code should pull all input values from the template variables (across all parent children) into the filter-menu-box (possibly eliminating duplicate input values).
This is my basic filter-menu chunk.
<div class="btn-toolbar">
<!--Default buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-default" type="button">T-V-1</button>
<button class="btn btn-default dropdown-toggle" data-toggle=
"dropdown" type="button"><span class="caret"></span></button>
<div class="dropdown-menu scrollable-menu" style="margin-left: 2em">
<input type="text" class="form-control" placeholder="Search values">
<div class="checkbox">
<label><input type="checkbox" value=""> Value-1</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value=""> Value-2
</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value=""> Value-3</label>
</div>
</div>
</div>
The values 1,2,3 should then list the input values from the t-v across all parent children.
Is it possible to achieve my objective in MODx EVO?
You could try the xdbfilter package for this. It is quite old but there is not much Evolution development these days. I think the linked package is the latest one.
I have a template like
script type: "text/template", id: "list-template", '''
<div class="display">
<div id="list-name"><%= name %></div>
<span class="list-destroy"></span>
</div>
<div>
<ul id="ul-cards">
</ul>
</div>
<div class="edit">
<input class="list-input" type="text" value="<%= name %>" />
<input id="btnEdit" type="button" value="Save" class="primary wide js-add-list" />
<input id="hdnListId" type="hidden" value="<%= listId%>" />
</div>
<form class="add-list-card js-add-list-card clearfix">
<textarea placeholder="Add card" class="new-card"></textarea>
<input type="button" value="Add" class="primary js-add-card">
<a class="app-icon close-icon dark-hover cancel js-cancel-add-card" href="#" id="closeCard"></a>
</form>
'''
in this template i have <ul id="ul-cards"> element in which i want to render another template which display list inside this ul.
this template is :
script type: "text/template", id: "card-template", '''
<div>
<span class="card-name"><%= name %></span>
</div>
'''
is it possible or i have to do it in another way?
please help me if anyone have idea.
thanks in advace.
it is worked but still i have one problem in data display in
<ul id="ul-cards"> there sholud be 2 as per records in my database but it will display only 1 . data fetch properly but display only last data.
There are two ways to do this: the DOM way and the template way.
The DOM way involves adding your views using DOM methods: you have your ListView and your CardView; the ListView invokes individual CardViews that fill in the ListView's element.
The template way requires that you remember this: backbone's views are policy frameworks, not policy templates. Render doesn't have to render into the DOM. You can use render() to return a string, for example. If your event manager is on the ListView object only (possible; I've done this), then you can have ListView invoke "the resulting array of an array of CardView renders" and insert that directly into ListView's template. This is actually faster, as you only require the browser to analyze the entire ListView HTML blob once, when it's inserted into the innerHTML of the parent DOM object.