i have simple modal window plan.vue with slot
...
<div class="plan__content">
<slot></slot>
</div>
...
there is also example.vue where it is used
<button
#click="showPlan"
>
Show plan
</button>
<plan
v-if="isPlanVisible"
#closePlan="closePlan"
>
</plan>
and i also have twig file plan.html.twig
{% block field %}
<table id="plan_table">
<caption>
<h2> {{smth.name}} </h2>
</caption>
...
</table>
{% endblock %}
can i add my twig here <plan> </plan> somehow? I tried to find a solution but only found how to add vue to twig and not vice versa
You can not embed a twig file inside a Vue component and render it. You have two alternative options:
You implement you twig template in "Vue Code" and don't use the twig template at all.
You load the rendered twig template via HTTP Request from a backend endpoint and render the response inside you Vue component vie v-html attribute for example.
Related
In OctoberCMS, I am creating a component. In the component's default.htm partial file (/acme/myplugin/components/mycomponent/default.htm) I can include any other registered component by doing:
{% component 'someComponentName' %}
However if I have the following code to handle an AJAX request:
public function onAjaxRequest()
{
return [
'#ajaxUpdate' => $this->renderPartial('#dates-partial'),
];
}
and in my dates-partial.htm file I put the same contents as in my default.htm file, the someComponentName component is not rendered. I also tried putting the following at the top of the file:
[someComponentName]
==
however this is outputted directly as text to the page.
How can I have renderPartial() render a partial containing a component?
Hi I tried your approach but seems its working for me. let me share howI did the things.
My Page
title = "compo-in-partial-in-ajax"
url = "/compo-partial-ajax"
layout = "default"
is_hidden = 0
[newCompo]
[newOne]
==
<!-- AJAX enabled form -->
<form data-request="onTest">
<!-- Action button -->
<button type="submit">Call Ajax</button>
</form>
<div id="ajaxUpdate">
Default content.
</div>
{% component 'newCompo' %}
I have added 2 component
newCompo <- which is used to render content on page. basically in its 'default.htm' I added {% component 'newOne' %} so I am rendering another component inside.
newOne <- this is component which we are going to render inside our partial.
this is my ajax handler
public function onTest() {
return ['#ajaxUpdate' => $this->renderPartial('#partial.htm')];
}
newCompo component's -> default.htm
{% component 'newOne' %}
newOne component's -> default.htm
<h1>Newone</h1>
Partial file which is inside components/newcompo -> partial.htm
<h4>partial</h4>
{% component 'newOne' %}
Output
Normal
After ajax Call
For the first time, i am working on Symfony widgets.
{% render "EducateToolsBundle:Shared:selectMenu" with {'entity': 'Stores'} %}
its Meaning is SharedController -->selectMenuAction
{% form_theme form 'EducateToolsBundle:shared:_form_theme.html.twig' %}
What is the meaning of this.
From where i am getting the values to this form .?
You must look at selectMenuAction() method in the Shared controller. It is that function that set what template is used. if using the default Symfony coding standards it should be something like selectMenu.html.twig in a Shared sub folder in the Resources/views of the bundle.
You should looks at the documentation first :
https://symfony.com/doc/current/form/form_customization.html
Because we won't teach you symfony here, it's very well explain in the documentation and it is a task too big for us.
In your case theForm.id is the field of the formType we want to displays.
If we want to display the <input> of an form of user lastname we would use
form_widget(userForm.lastname)
form_widget tells symfony to display only the widget (the ) of the id given.
if you want to have a label + input + the errors of the field you could use
form_row(userForm.lastname)
wich is almost equal to
<div>
{{ form_label(form.lastname) }}
{{ form_errors(form.lastname) }}
{{ form_widget(form.lastname) }}
</div>
(it depends of the form theme, but you should read the doc for the details ;) )
I have just setup a apache server and configured twig. I have two template files one called base.html.twig which has the core template elements and dashboard with blocks that correspond to the base.html.twig
dashboard.html.twig
{% extends "base.html.twig" %}
{% block content %}
<h1>Index</h1>
<p class="important">
Welcome on my awesome homepage.
</p>
{% endblock %}
However when I browse to dashboard.html.twig I just see plain html showing all of the code above. Have I misconfigured something?
I am sure it's something simple so I thank you for your help in advance.
You should not directly "browse" to a twig file, it needs to be parsed and rendered by php objects using classes from Twig libraries.
see http://twig.sensiolabs.org/documentation
To use twig you need PHP installed too. Also you would need Twig PHP library to parse twig templates.
I have a question: how can 1 view/page use 2 controllers to display different data?
For example:
1) Page displays DVD's information using DvdController.
2) On that same page I want to use a Template/Partial view, that displays list of actors, and that list should come from the second ActorsController.
I can add a template view inside another page but the second controller doesn't work:
MainPage on URL: website/dvd
{% block body %}
<div>
<h1>{{ dvd.title }} </h1>
</div>
<div>
{{ include('DVDBundle:Actors:actors.html.twig') }}
</div>
{% endblock %}
Above I use the partial view actors.html.twig to show the actors, strangely the html code/div's and so on are actually displayed and working on the page, however the controllers(ActorsController) method that meant to return this partial view is not executed for some reason.?
But if I go to the view directly via link: website/actors then its working.
The Symfony documentation on embedded controllers explains this nicely.
In short, you will need to do something like this in your template file:
<div>
{{ render(controller(
'DVDBundle:Actors:actors',
{ ... parameters to the controller action here ... }
)) }}
</div>
The important thing is calling the render function, which allows a controller to be rendered, as opposed to simply includeing a template. (This assumes that your have an ActorsController with an actorsAction method; change the names as appropriate to your controller.)
In my volt template:
<div class="container">
{% block conteudo %}
{% endblock %}
</div>
I want to load dynamically that block via ajax. All of my childs have block conteudo.
How i can do that?
Thanks for your help.
I think that you're mixing PHP with JavaScript.
So if you want to load something via AJAX just use empty DIV
<div class="container"></div>
then if you want to load something from server, ie part of view generated by Phalcon/Volt, create action that renders contents of that block.
In jQuery you can:
$( "#result" ).load( "some/conteudo", { maybeSome: "params" });
And you should have SomeController that have conteudoAction method that renders some/conteudo.volt view.
Your some/conteudo.volt should render only that part of view, ie:
<h3>{{ post.title }}</h3><p>{{ post.someThing }}</p>
Another way is to render you div.container contents by JavaScript with data obtained from serwer. To do that you could return JSON data from SomeController::contuendoAction and JavaScript part of your app will create HTML to your page.