I have been trying to implement a solution for this for a while and I have not come to a clean one yet.
Please, help me.
I have 2 routes:
/login
/register
They have very similar templates:
login.html
<div class="main-container">
<section class="fullwidth-split">
<div class="container-fluid">
<div class="row">
<div class="col-12">
[...more similar html to both views...]
<h2>Login</h2>
</div>
<!--end of col-->
<div class="col-12">
Login form HTML
</div>
</div>
</div>
</section>
</div>
register.html
<div class="main-container">
<section class="fullwidth-split">
<div class="container-fluid">
<div class="row">
<div class="col-12">
[...more similar html to both views...]
<h2>Registration</h2>
</div>
<!--end of col-->
<div class="col-12">
Registration form HTML
</div>
</div>
</div>
</section>
</div>
As you can see, most of the HTML is the same, including the section and container div. I would like to reuse this template and I have tried using child routes and using on the dynamic HTML part, but as you can see the h2 changes its content as well, so unless I duplicate this template it's not possible. The best I've got is using the router-outlet, but then I have a STATIC title h2 and can't change it on the child component because it's on the parent component template.
Any suggestions?
Here is one possible solution.
Create a component (my-component) that uses the shared html and add content projection to it. The html should look something like this:
<div class="main-container">
<ng-content></ng-content>
</div>
You project the different content like this:
register.html:
<my-component>
<h2> Registration </h2>
</my-component>
login.html:
<my-component>
<h2> Login </h2>
</my-component>
You could also have multiple content projections.
This is done by adding a select attribute to the ng-content in my-component:
<div class="main-container">
<ng-content select=".heading-content"></ng-content>
<ng-content select=".form-content"></ng-content>
</div>
And use like this:
<my-component>
<h2 class="heading-content"> Login </h2>
<div class="form-content">
.....
</div>
</my-component>
Related
so I have a page. there's a search bar. if the search bar has no text inputted, the page displays two partials, one for featured apps and one for most popular. but if someone inputs any text at all into the search bar then the featured apps and most popular apps partials disappear and the search results partial shows up. instead what happens is neither partials load. there's just a big blank space where they should be.
I tried doing this with jQuery but was having no luck. so now I'm back to trying to use dynamic partials but am also having no luck with that. if this can only be done with something like jQuery please let me know.
I was briefly trying to use a handlebar helper but I could not link it to the input id="searchApps" element without throwing an error because it keeps saying searchApps is undefined.
index.hbs (if this is missing any divs it's cause it's just part of the code)
<div class="col-2 offset-1">
<div class="column-side">
<div class="sidebar">
<input id="searchApps" type="text" placeholder="Search apps...">
{{!-- so once someone types the first character here the searchResults partial should render. and it should be dynamic so results should further refine with each additional character typed--}}
{{>sidebar}}
</div>
</div>
</div>
{{#if 'searchApps.length === 0'}}
<div id="searchResultsHomePage">
<div class="col-7 offset-1">
{{>searchResults}}
</div>
</div>
{{else}}
<div id="homePageNoSearch">
<div class="col-7 offset-1">
{{>featuredApps}}
</div>
<div class="most-popular-grid">
{{>mostPopularApps}}
</div>
</div>
{{/if}}
here is the jQuery I tried in the index.hbs file just before the </body> tag
<script type="text/javascript">
$('#searchApps').on('change', function(){
if ($(this).val() == ""){
<div id="homePageNoSearch">
<div class="col-7 offset-1">
{{>featuredApps}}
</div>
<div class="most-popular-grid">
{{>mostPopularApps}}
</div>
</div>
} else {
<div id="searchResultsHomePage">
<div class="col-7 offset-1">
{{>searchResults}}
</div>
</div>
}
});
</script>
so anyone know how I can do this?
thanks
I want to use section tag in my program so which is right way for using section tag for inside of program...
<section id="training-pg">
<div class="row">
<div class="container">
// Write you code here.
<h3>the title</h3>
<p><?php the_field('training_program'); ?></p>
</div>
</div>
</section> // Or
<div class="container-fluid">
<div class="row">
<section id="training-pg">
<h3>the title</h3>
<p><?php the_field('training_program'); ?></p>
</section>
</div>
</div>
The semantic way to use <select>, according to W3Schools, is:
A section is a thematic grouping of content, typically with a heading
And according to MDN:
The HTML <section> element represents a standalone section — which doesn't have a more specific semantic element to represent it — contained within an HTML document. Typically, but not always, sections have a heading.
Seeing as your first example has a section with an ID which clearly defines the purpose of the section, as well as a heading, I would say that this:
<section id="training-pg">
<div class="row">
<div class="container">
<h3>the title</h3>
<p><?php the_field('training_program'); ?></p>
</div>
</div>
</section>
Is the correct and most semantic way to use <section>.
The first way is the proper way to use the section tag.
<section id="training-pg">
<div class="row">
<div class="container">
// Write you code here.
<h3>the title</h3>
<p><?php the_field('training_program'); ?></p>
</div>
</div>
</section>
The first way is correct way to use the section tag
I have this html page structure, chart-legend is an AngularJS component:
<div class="chart-legend">
<h5 class="chart-legend-header">{{$ctrl.site}}
<div class="chart-legend-icons">
</div>
</h5>
<p class="chart-legend-average-demand"> -- Page Title</p>
</div>
In another page I'm adding ng-click on it like this:
<div class="demand page">
<div class="chart-legend-container">
<div ng-repeat="site in $ctrl.keys">
<chart-legend site="$ctrl.siteNames[site]" ng-click="$ctrl.updateLegendChart($ctrl.siteNames[site])" keys= "$ctrl.keys"></chart-legend>
</div>
<div>
</div>
The ng-click is triggered if I click anywhere inside chart-legend. What I want is to be triggered only when the click is performed inside <p></p>, on Page Title more exactly.
I tried to add it there like this:
<div class="chart-legend">
<h5 class="chart-legend-header">{{$ctrl.site}}
<div class="chart-legend-icons">
</div>
</h5>
<p class="chart-legend-average-demand" ng-click="$ctrl.updateLegendChart($ctrl.siteNames[site])"> -- Page Title</p>
</div>
It doesn't work, probably because it doesn't know who is $sctrl. Any suggestions?
I have 2 forms. One is a regular form (TestForm) and the other is inside a foundation tab.
Page 1:
<div class="columns small-8">
<form name="testForm">
</form>
</div>
<div class="row">
<div class="section-container tabs" data-section="tabs">
<section class="section active">
<p class="title">Gegevens</p>
<div class="content" data-slug="data">
<div ng-include src="'partials/user/UserData.html'"></div>
</div>
</section>
</div>
</div>
UserData.html (the tab):
<form name="debugForm"></form>
So the problem is below that I can't reach my debugForm. Does anyone know how to reach the form? (need to set validity)
Also when I trie to reach by going via the child scope:
$scope.$$childHead.debugForm
doesn't work.
The problem is that you can't access child scopes from a parent scope in angular.
I temporarily "solved" it by just not using the include and instead just put the html in there.
Still open for better suggestions though..
Try src="partials/user/UserData.html" (whithout ' )
I've been playing around with knockoutjs recently to see if it's going to be of any help to the things I do. I'm a bit stuck on something though.
Say I have an observableArray and and I want to bind the items using a template but without a container, or render itself. Is it possible?
The sample markup is:
<div class="header row">
<div class="cell">Product Name</div>
<div class="cell" data-bind="foreach: option_types">
<div class="cell" data-bind="html: Name"></div>
</div>
<div class="cell">Level</div>
<div class="cell">Infinite</div>
</div>
However what I would really want is something like this (note no child .cell elements, and "renderSelf" - made up parameter)
<div class="header row">
<div class="cell">Product Name</div>
<div class="cell" data-bind="foreach: option_types, renderSelf: true">
${Name}
</div>
<div class="cell">Level</div>
<div class="cell">Infinite</div>
</div>
Which would then result in something like
<div class="header row">
<div class="cell">Product Name</div>
<div class="cell">Name 1</div>
<div class="cell">Name 2</div>
<div class="cell">Name 3</div>
<div class="cell">Name 4</div>
<div class="cell">Level</div>
<div class="cell">Infinite</div>
</div>
Is that going to be possible? Or am I thinking of it in the wrong way?
Thanks.
Version 1.3 which is "stable beta" allows you to declare what's called a Containerless Control Flow. This is a fancy way of saying you can declare the foreach within an HMTL comment which will allow you to achieve the desired output. For your example it would look like this:
<div class="header row">
<div class="cell">Product Name</div>
<!-- ko foreach: option-types -->
<div class="cell" data-bind="html: Name"></div>
<!-- /ko -->
<div class="cell">Level</div>
<div class="cell">Infinite</div>
</div>
See this article on Steve Sanderson's blog for more info.
I've been using 1.3.0 on a relatively large application recently and found it to be very stable.
As an aside the ability in 1.3.0 to also access the parent and root viewModel within a foreach template is incredibly useful and helps keep your viewModel design much cleaner.