Today I have come to a shocking discovery: actions referenced on a view are handled by their route, not by the view which referenced it. Ex:
<a href="#" {{action edit}}>Edit this</a>
The edit action must be defined in the Route, not in the View. When I was not using a Router before the View was the one responsible for handling such events and I was really happy about it.
Can anyone please:
explain to me why the Route must handle the event, and what are the benefits of this
tell me how can I give control back to the View in matters of handling such actions/events?
Set the target as view
<a href="#" {{action edit target="view"}}>Edit this</a>
If your action is in controller then use
<a href="#" {{action edit}}>Edit this</a>
Default target refers to the view's controller
I'd suggest you to go through this Reference: Ember Action Helper
I'd like to mention some key points as per the above reference
In a typical Ember.Router-backed Application where views are managed through use of the {{outlet}} helper, actions will be forwarded to the current controller.
If the action is not defined in the controller, then the current route is targeted.
Related
I just started learning Laravel, and I want to include a second controller into my main layout.
The route is the default root directory: /
And the layout looks like this:
<div class="container">
#yield('content')
</div>
<div class="basket">
~basket comes here~
</div>
I want to show the user's basket, but I need DB queries for that, and I can't find a way to include an other controller, atleast not with routing.
I'm not really asking for code (Sadly i didn't find a better place for this question), probably I just need a designing tip, I really feel I'm trying to do it wrong, since I couldn't find any relevant/helpful information for this.
And I dont want to put the basket into every controller that uses my main layout.
Any kind of help would be apreciated, I'm really lost :)
You should use view composers. Open you AppServiceProvider and inside the boot() method add the following:
view()->composer('your.layout.name', function ($view) {
$basket = ...// Your basket query here
$view->with('basket', basket);
});
This basically says, when view with name your.layout.name is composed, add variable with name $basket.
I am looking for a very general way to include bootstrap components in my blade view. For example let's say I need a drop down in my view, should I make a partial called dropdown.blade.php with code as follows:
<div class="dropdown">
<a href="#" class="dropdown-toggle" type="button" data-toggle="dropdown">
<span class="glyphicon glyphicon-chevron-down"></span></a>
<ul class="dropdown-menu">
#foreach ($options as $option)
<li>{{$option["name"]}}</li>
#endforeach
</ul>
</div>
and use it in my view in the following way:
#include('partials.dropdown',
array("options"=>array(
["href"=>"#", "name"=>"Profile"],
["href"=>"#", "name"=>"Report"],
)))
Even we can make it more generic by adding options for button name etc. Is it a good or preferable way to do it or should we use copy-paste method from bootstrap website to our views every time? Is there any package that is doing this sort of work? Can we make it in more elegant way?
This seems like a good idea if you are going to re-use the component a lot. I think the more elegant way to do it would be to create custom blade directives:
https://laravel.com/docs/master/blade#extending-blade
Then you could do, for instance:
#dropdown($options, 'btn-primary')
I would also provide an argument for a custom element ID or name, so you can reference it elsewhere on the page as needed.
This gets a little more complex with things like modals. I think you'd want to register multiple blade directives so you could do something like
#startmodal
#modaltitle('Title')
#startmodalbody
Some body content
#endmodalbody
#endmodal
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.
Ember.js has a great mechanism of binding data to views, of setting triggered event handling in the view, or using a Router. But what I would need is to be able to handle events triggered in already created HTML code (by PHP, server-side).
Let me show you a simple example. I have this code:
<a id="login" href="#">Login</a>
I need to be able to route/handle the click on this link so that it gets into my Ember application.
I have been looking for ways to do this, but I can't find any.
How can I do this?
If this link is inside a DOM element which is a child of the Ember managed element, then you can use the action helper:
<a id="login" href="#" {{action doSomeStuff}}>Login</a>
This doSomeStuff event will be sent to your Ember.Router, which has to implement the handler in the appropriated route:
...: Ember.Route.extend({
doSomeStuff: function (router) {
//...
}
}),
If the link is outside your app's scope, you can register handlers on the app-related elements using JQuery:
$('a#login').click(function () {
App.router.transitionTo('the.route.path');
});
The App.router being injected at Ember app's initialization, you can access it from anywhere.
But let me say that it is not a best practice to transition from outside the router.
Last but not least, you can also pass a context to the transitionTo call.
I have a razor masterpage (_Layout.cshtml) where I layout a 3 column website. In one of the side columns I want to display a "Login Control"
From my readings, I can use Html.RenderAction to call my LoginController and it will display the login view in the side column.
But, when I run it and point it to a Controller/View to fill the RenderBody(), the call to Html.RenderAction("Index", "LoginController") fails with this error.
"The controller for path '/[insert path to a Controller/View to fill the
RenderBody()]' was not found or does not implement IController. "
So, what am I doing wrong?
My code really is as simple as:
<div id="Navigation">#{ Html.RenderPartial("Test"); }</div>
<div id="Main">#RenderBody()</div>
<div id="Misc">#{ Html.RenderAction("Index", "LoginController");}</div>
And in my controllers folder, I have the controller for the RenderBody and the LoginController.
When specifying controller names by convention in MVC, you don't include the "Controller" part.
Html.RenderAction("Index", "LoginController")
wouldn't work unless you had a controller named "LoginControllerController"
try
<div id="Misc">#{ Html.RenderAction("Index", "Login");}</div>