I have a PHP blade file and I have a list of components working as they but can't seem to pass in a custom event in the kebab style casing the documentation mentions .
Blade template
<div id="app">
<Shop
:active-tab="activeTab"
#show-product-modal="handleShowProductModal"
>
</Shop>
</div>
Even the #show-product-modal color syntax in my text editor shows something is off but I can't tell what the issue is here. I've even tried camel casing it but that doesn't do it either. However, if i changed it to 1 word , like "#showitnow", it works fine.
When using VueJS you can't use kebab case for listening to component events. Instead your blade template should read:
<div id="app">
<Shop
:active-tab="activeTab"
#showProductModal="handleShowProductModal"
>
</Shop>
</div>
Related
I have an x-for loop:
<template x-for="item in items" :key="item.id">
Inside the template I call my blade component:
<x-card />
How can I pass vars from the Alpine JS loop to the blade component?
I've seen this and have tried to implement it:
<template x-for="item in items" :key="item.id">
<x-card ::title="item.title" />
....
But I cannot output the title var inside the blade component.
AlpineJS is JavaScript, therefore client side. Blade is server-side. The tip you passed is what is described in the docs and is just to prevent Blade from evaluating the statement, since Blade can also process single-colon variables.
If your goal is to display the title as text within the card, then have a look at x-text. You should be able to call x-text="item.title". :title should be setting the title attribute on the item.
I have Laravel app that I wrapped in a Vue entry point, <div id="app-shop"></div>. I have Vue components I can use in the layout blade with no problem. In the layout blade, I have #yield('content') to display other content. One such section is the shopping cart, such as /cart route which yields my cart.blade file. When I try to use the same component in the cart.blade though, it doesn't show.
Cart.blade.php
#section('content')
<div>
<checkout-component></checkout-component>
</div>
#endsection
Attempting to use it like this does not work. I see no errors in the console but the component doesn't render.
I'm new to Laravel and I faced this issue, when I'm using #yield('content') to view some HTML, the out put will be the exact contact with decoding it into HTML.
Here is my code :
#yield('content',"<p>This is a great starting point for new custom pages</p>")
And the out put is : <p>This is a great starting point for new custom pages</p>
And here is a screenshot :
Can someone help me know what's going on please?
In Laravel, the #yield directive is looking to pull the #section that you note up from whichever file is producing the html. When you pull in the #section, it is formatted as proper html on the page.
So, if you had a section like this:
#section('paragraph')
<p>here is some text</p>
#stop
And pulled this in a #yield statement:
#yield('paragraph')
This would simply output the html:
here is some text
What you have done with this:
#yield('content',"<p>This is a great starting point for new custom pages</p>")
is to supply default text to display on the screen if the 'content' section is unavailable. This text is escaped, thus you are seeing the html tags.
#Mousa Alfhaily, You do not have to pass the return value with the html tags
If you want to paragraph the return value... Then you do that at where the content is been rendered
#yield('content',"<p>This is a great starting point for new custom pages</p>")
it should be
#yield('content')
then your
#section('content')
$var = "This is a great starting point for new custom pages";
<p>
{{$var}}
</p>
#endsection
The #section directive, defines a section of content, while the #yield directive is used to display the contents of a given section.
So, if you had #section like- #section('paragraph')...#endsection.
then, #yield must be like - #yield('paragraph')
Example
In #yielddirectives -
#yield('content')
In #section directives-
#section('content')
...
your html content
...
#endsection
I have to create multi page angular framework using ng boilerplate. We have modular component based approach and single component can be created multiple times on same page. For example I can have 2 instance of carousel component on home page and there configuration and slides parameter for image path etc are coming from ajax. Now challenge is that this ajax url is dynamic and there is no fixed pattern so I cant hard code in my js. is there any way I can pass this dynamic url from template to my $http request?
Something like this in
<div ng-controller="CarouselCtrl" carouselUrl="<dynamic url>">
<div class="container slider">
<ul>
<li ng-repeat="slide in slides">//..</li>
</ul>
</div>
</div>
You can pass attributes to controllers only in directives. Moreover, you might rethink having your CarouselCtrl logic in separate directive, as this is clearly the case where this should be done.
Background Smarty is a templating engine that separates the presentation layer from the logic layer of web applications. It is well-suited for the Model-View-Control approach to developing web applications. The View can be represented by Smarty templates, which contain only HTML and Smarty tags. The Control can be implemented by PHP files that serve the appropriate views based on the logic contained within them via PHP code. The View is instantiated by displaying the templates via the display() command. Alternatively, a template can be read in as a variable without displaying it via the fetch() command. The file name of the template is the argument to both these commands.
Issue The fetch() command can read an entire template. In order to read parts/sub-parts of a template, each of these parts would normally needed to be stored in a separate file with its own name that can be the argument to the command. This creates needless files.
Question Is it possible to fetch only parts of a Smarty template by somehow marking sections of the template?
Case example Below I present a sample template file with Smarty and HTML tags, as well as the corresponding controller file with PHP code.
Template file (index.tpl)
<html>
<body>
<div id="sec1">
First section
</div>
<div id="sec2">
Second section
</div>
</body>
</html>
Controller file (index.php)
<?php
$smarty = new Smarty;
$template = $smarty->fetch("index.tpl");
?>
In the example above, the $template variable would contain the full output from the template page. Below is a dump of its contents from the example.
$template => string(255)
"<html><body>
<div id="sec1">First section</div>
<div id="sec2">Second section</div>
</body></html>"
However, suppose I wish to read in the code from each of the DIV containers separately, and store them into separate variables, how could I achieve this? For instance, suppose I have a magical function called fetch_sub(). Here's my expectations of using it.
<?php
$smarty = new Smarty;
$div1 = $smarty->fetch_sub("index.tpl", "sec1");
$div2 = $smarty->fetch_sub("index.tpl", "sec2");
?>
Then $div1, etc would contain only the relevant sub-part, instead of the whole template.
Other info I am not a beginner with Smarty and have a fairly good handle on basic concepts, as well as some of Smarty's advanced concepts. Following is my attempts so far at conceptualizing the problem and getting to a solution. My initial rough idea is to demarcate the template into sections using {capture}, and then somehow reference each of these sections. I present an outline example of the idea below.
{capture name=sec1}
<div id="sec1">
First section
</div>
{/capture}
. . .
Smarty (as of Smarty 3.1) has no built-in feature to allow you achieving your goal. I had proposed something similar in 2011, but we haven't come around to implementing it.
Maybe you can have the generated HTML parsed to DOM and help yourself with xpath, or something like that?
You can try this:
sec1.tpl
<div id="sec1">First section</div>
sec2.tpl
<div id="sec2">Second section</div>
index.tpl
<html><body>
{include file="sec1.tpl"}
{include file="sec2.tpl"}
</body></html>
And then You can fetch parts by invoking:
$smarty = new Smarty;
$div1 = $smarty->fetch("sec1.tpl");
$div2 = $smarty->fetch("sec2.tpl");