Let's suppose I have a frontend application, let's just use Vue as an example, that has a Text component which takes in a prop text which it renders out on route /my-page:
<template>
<div>{{ props.text }}</div>
</template>
Now I would like to create a corresponding backend that lets me change this text. What I thought would be cool, is if I was to go to a certain route, e.g. /backend/my-page that looked exactly like /my-page in the frontend (i.e. it pulls in my-page as a component), but allowed configurability of the text and whatever.
What I thought about doing was to extend my text component and basically check whether I am in the backend (by looking at the route) and then render out a CK5Editor to be able to change the text. This text would be sent to the database, then in turn be rendered out in the frontend:
<template>
<editor v-if="route.startsWith('/backend')" />
<div v-else>{{ props.text }}</div>
</template>
While I suppose this approach would work, I am wondering whether this would be the right way to do it, or whether instead to separate these two components into one and if so how to do that.
Related
for your understanding i attached w3school screenshot.
enter image description here
if u have ever visited w3school website u will understand my requirement easily.
i want to create these html sidebar dynamic from my admin dashboard. first i will create one sidebar title name then insert content according to title name and so on..... for best understanding you can assume that i want to create w3school clone dynamic from where i can dynamic create sidebar and content. i read about react router dom and many more but not able to create like this.
You can use react-router for navigation and then render according to the route
https://codesandbox.io/s/c2zs4
here is the example I found, it used react-router for navigation and render components according to the route.
add in _app.js file
you can put a header here
<div className="flex">
<div className="W-2/6>
<Sidebar/>
</div>
<div className="w-4/6">
page component here
</div>
</div>
and footer here
I used tailwind CSS
I've been working with pug/jade a little bit and now I'm trying to build the same project using handlebars.
I have this iteration that renders a few options:
<select id="myselect" name="myselect">
{{#each categories}}
<option value="{{id}}">{{title}}</option>
{{/each}}
</select>
A bit further down the code I need to render some items dynamically based on the selected item from myselect.
Any idea how I can grab it dynamically? Basically the same way like onchange() works in plain javascript.
When you use any kind of tempting engine (handlebars, jade, ejs, etc). You cannot bind data after the response sent to the client. You have to write some client side javascript code to achieve that.
As an alternative you can use handlebarjs on client side. Follow this link
But this may need to be used carefully, since you are using the same template engine on your server side.
I've been thinking of a way to include components of markup in a modular fashion. For example if I were to include a slider I would have to include the relevant css and JS for it to function correctly. Is there any known method of including these as one component?
<div> {{slider}} </div>
{{slider}} then would import slider.html, slider.css and slider.js but to their respective directories. css/slider.css and js/slider.js
Is this possible given our current array of production tools?
We have implemented a layout where the main content resides in dynamic sidebars. We defined following layoutTemplate:
<template name="layout">
{{> content}}
{{> leftbar}}
{{> rightbar}}
<nav class="navigation">
{{#if currentUser}}
{{> navigation_logged_in}}
{{else}}
{{> navigation_logged_out}}
{{/if}}
</nav>
</template>
We include e.g. the rightbar template in the layout template.
<template name="rightbar">
<aside class="rightbar">
<button id="closeRightBar" class="close-cross"></button>
{{yield 'rightbar'}}
</aside>
</template>
The rightbar template includes the rightbar yield where we yield the specific content into.
We have implemented following RouteController:
UserShowRouter = RouteController.extend({
before: function() {
var username = this.params.username;
if(App.subs.user) {
App.subs.user.stop();
}
App.subs.user = Meteor.subscribe('user', username);
},
waitOn: function () {
return Meteor.subscribe('user');
},
data: function() {
return Meteor.users.findOne({'profile.username': this.params.username});
},
action: function() {
this.render('profile', {to: 'rightbar'});
}
});
What we wanted to achieve is that for example the profile template is yielded into the rightbar yield and get's updated and re-rendered as the data changes.
The problem is now that the sidebars are dynamically animated, shown and hidden. Now every time the profile template gets re-rendered also the layout template gets re-rendered. Why is that? We thought one of the purposes of yield regions is that the whole site doesn`t need to be re-renderd. Now when the layout gets re-rendered the whole css of the animations are set back to the original values.
We now have tried several different approaches, but none of them seems to be a good and clean solution. Is there a way to keep the layout template from being re-rendered and just keep the yield region and template up-dated? Any suggestions or alternatives would be highly appreciated.
As I understand it, the behavior in which re-rendering of your templates "bubbles up" and causes re-rendering of their parent templates is not particular to iron-router or the way your code is implemented, but is inherent in Spark. Iron-router's {{yield}} pattern does not alter this behavior, as far as I can tell from its documentation.
The good news is that Spark is set to be replaced imminently with a newer, more fine-grained rendering engine, currently codenamed "Spacebars," which should alleviate the concern.
Here is a preview of the new rendering system:
https://github.com/meteor/meteor/wiki/New-Template-Engine-Preview
This talk from a week ago is also excellent at describing the benefits coming through the new rendering engine (while fairly long, an overview is given in the first 5 minutes):
https://www.youtube.com/watch?v=aPf0LMQHIqk
As for your options today, you can:
a) Use the {{#constant}} and {{#isolate}} parameters to try to limit re-rendering.
b) Work from a development branch as described in the link above:
You can play with the current work-in-progress version of the code using the template-engine-preview-4 release tag (run your app with meteor --release template-engine-preview-4), or by checking out the shark branch (it's an internal codename).
c) Best of all if the timeframe of your project allows is to allow the re-rendering to continue until Meteor 1.0 hits and "Spacebars" resides on the main branch - it sounds like this is 1-3 months away.
I think that the reason your layout template gets rerendered is because the data hook you implemented uses a reactive data source. If the current user object changes, the router probably decides to rerender the whole page because there is no simple way to decide which parts exactly depend on your reactive data.
If I'm right, a simple solution to your problem is to create a user helper that will fetch the necessary data only where they're actually needed, e.g.
Template.profile.user = function () {
return Meteor.users.findOne({/*...*/});
}
Then you can use it in your profile template along with the with helper (sic!), i.e.
{{#with user}}
...
{{/with}}
to prevent multiple calls to the Template.profile.user function.
Also, if I were you, I would use the data hook only for data which is required by templates in my layout.
I'm using modx revolution. I'd like to create a chunk called layout that calls other chucks example
Head
header
nav
body
footer
then in my template do something like //open layout tag[[$layout]] [[$layout]]//close layout tag. then inside of the the open close tags append my [[*content]]. this would allow me to reuse my layout template over and over again without having to replicate it in the templates. First question, is it possible, second what kind of syntax would be needed to achieve this goal? I'm rather new to modx and know it's possible with other frameworks, so any help would be appreciated. Thanks.
Sample concept done in Apache Tapestry framework, obviously different syntax, but should give you the general idea of what I'm looking for.
components/Chunks used.
Layout
Header
Nav
Footer
Inside of layout
<html>
<t:Header/>
<t:Nav/>
<t:Body/>
<t:Footer/>
</html>
Inside of Index/Template
<t:Layout>
template body content goes here ex. [[*content]]
</t:Layout>
Hope this helps to clarify.
Your post is not very clear and I think you haven't really taken much time to read up on how MODx works before looking for help.
That aside, I think what you want to do is create different templates, structured more or less like this:
[[$header]]
[[$nav]]
<div id="content">
<h1>[[*pagetitle]]</h1>
[[*content]]
</div>
[[$footer]]
That might do for your home page, then for internal pages where the layout is a bit different you can create one or more new templates for each layout:
[[$header]]
[[$nav]]
<div id="content">
<h1>[[*pagetitle]]</h1>
[[*content]]
</div>
[[$sidebar-chunk]]
[[$footer]]
You can even show different layouts using a single template something like this:
[[$header]]
[[$nav]]
<div id="content">
<h1>[[*pagetitle]]</h1>
[[*content]]
</div>
[[*parent:is=`6`:then=`
[[$recent-articles]]
`:else=`
[[$sidebar-chunk]]
`]]
[[$footer]]
That should get you started, but you'll soon realise there are multiple ways to do everything in MODx.
You can put your [[*content]] where-ever you want, even inside another chunk, if that's what you mean.
So your [[$layout]] chunk could just be this:
[[$header]]
[[$menu]]
<div id="content">
<h1>[[*pagetitle]]</h1>
[[*content]]
</div>
If you want to make some minor changes in a chunk on a template-basis you could also do something like this in the template:
[[$layout? &customContentBits=`
<h1>[[*pagetitle]]</h1>
[[*content]]
`]]
and your layout chunk could then be something like this:
[[$header]]
[[$menu]]
<div id="content">
[[+customContentBits]]
</div>
That's a placeholder ([[+customContentBits]]) which is set by adding the &customContentBits in the chunk call.
Explained that a tad more with a different use case on my blog some time ago too: http://www.markhamstra.com/modx-blog/2010/10/introducing-element-properties-and-output-modifier/
What you are asking can absolutely be done. In fact, on my website, I even have the same template/chunk combo providing multiple layouts by passing a template variable as a chunk modifier. But anyhow, let's keep things simple.
A quick note on your question., ModX doesn't use start tags and end tags, natively. It's best to stop thinking that way. Instead just place things where you want to place them. Resource variables can go in any chunk, as each resource is unique.
Create your Chunks:
First, start with the simple ones. Create your Header, Footer, and Navigation. Next, create your Body. Inside the Body, make sure to include your [[*content]] (no... it doesn't have to go into the Template. Finally, create your Layout with the following code:
[[$header]]
[[$navigation]]
[[$body]]
[[$footer]]
Create your Template:
Your template can now be as simple as [[$layout]]. You're done.
Note
While you can do this with ModX, understand that the power of ModX is that you can have multiple templates and chunks depending on the type of content you have. Singularizing everything like this really takes away a major advantage of using the platform.
Mark Hamstra more or less gave you the answer, but just to clarify: Any snippet, chunk or output of some sort in Modx can take parameters. Chunks and snippets especially can make use of these params easily. From what i understand you want to have all your templates call [[$layout]] and nothing else.
The layout chunk in turn looks like
[[$header]]
[[$navigation]]
[[$body]]
[[$footer]]
On this you simply build and add your params, nesting them down from the top like
[[$layout? &useNavigation=`1`]]
(And continue passing the param in your layout chunk)
[[$header]]
[[+useNavigation:is=`1`:then=`[[$navigation]]`]]
[[$body]]
[[$footer]]
Another way of accomplishing the same behaviour would be to use a single template to which you have connected a series of template variables that decide how the template looks like. You might have template variable called useNavigation of checkbox type. If you check this through the resource editor it will be passed to your $layout chunk directly without having to add params into the $layout chunk call.
[[$layout]]
(Just call layout normally and add the TV checks to the layout chunk directly.
Note the difference between calling a TV and a placeholder, + vs *)
[[$header]]
[[*useNavigation:is=`1`:then=`[[$navigation]]`]]
[[$body]]
[[$footer]]