Ember.js - child nested views' controller - view

I'm building a simple calendar app with Ember. My views are nested this way :
<script type="text/x-handlebars" data-template-name="calendar">
{{content.monthAsString}}
{{#each day in content.days}}
{{view App.DayView contentBinding="day"}}
{{/each}}
</script>
<script type="text/x-handlebars" data-template-name'="calendarDay">
{{content.date}}
</script>
My JS code :
App.CalendarController = Ember.ObjectController.extend({
content:App.Calendar.create(...);
oneDayHover:function(day){
}
});
App.CalendarView = Ember.View.extend({
templateName:"calendar"
});
App.CalendarDayController = Ember.ObjectController.extend({
dayHOver:function(){
//???? HOW TO ACCESS CalendarController?????
}
});
App.CalendarDayView = Ember.View.extend({
templateName:"calendarDay",
init:function(){
this._super();
this.set('controller', App.CalendarDayController.create());
},
mouseEnter:function(){
this.get('controller').dayHover();
}
});
Problem 1:
Isn't there a nicer solution than to override the init method of the view to set it's controller?
Problem 2:
How can I access the oneDayHover of CalendarController from the CalendarDayController?
Thanks in advance for the help
Update 1:
I should remark that those controllers exists in the same state. The point of the mouseenter is to display a popup on top of the CalendarDayView containing extra information.

1 - Do not assign Controllers to Views manually. Let Ember do the heavy Lifting! Have a look at Embers Router API / how to define routes. Routes will connect controllers and views and render them (Doc).
2 - If you follow point 1, your other problem will get easy with Embers way of dependency injection:
App.CalendarDayController = Ember.ObjectController.extend({
needs : ["calendar"],
dayHOver:function(){
//Access the single instance of CalendarController
var calendarController = this.get("controllers.calendar");
}
});
Update in response to Comment:
The CalendarRoute is created implicitly. Therefore all you would need to do, is modifying your template, i guess:
<script type="text/x-handlebars" data-template-name="calendar">
{{content.monthAsString}}
{{#each day in content.days}}
{{control "calendarDay" day}}
{{/each}}
</script>
As you see, i am suggesting the use of the {{control}} helper. What the code above basically says is :
"Dear Ember, please use the name 'calendarDay' to lookup
App.CalendarView and App.CalendarDayController and use them to render
the object day"
Additionally you have to tell ember, that it should not use the controller as singleton (which is the defaul behaviour):
App.register('controller:calendarDay', App.CalendarDayController, {singleton: false });
Note: I have not yet used the control helper myself, but this should be the way it works.

Related

laravel passing a variable to js file from a controller

I have a js file located in assets folder (not View). can i pass a varible from a controller?
In view file:
The Js is called like this
<canvas id="chart1" class="chart-canvas"></canvas>
</div>
It is not possible (in my point of view) to put a variable to external JS file. You can use data-... attributes and get values from html elements.
For example you can pass your PHP variable as a json encoded string variable in your controller.
$data['chart_info'] = json_encode($chart_info);
return view('your_view', $data);
Then put it in data-info like this.
<canvas id="chart1" class="chart-canvas" data-info="{{ $chart_info }}"></canvas>
And finally in JS, you can get the variable and decode (parse) it as following.
let canvas = document.getElementById('chart1');
let info = JSON.parse(canvas.dataset.id);
console.log(info);
You can put that part of the Javascript in the view and send the variable to the same view. For example, add a section in view:
#section('footer')
<script type="text/javascript">
</script>
#endsection
Do not forget that you should add #yield('footer') to the end of your layout view.
I don't like to mix javascript and PHP/Blade, it might be hard to read the code in the future... You could use a different approach, loading the chart with a async ajax request.
You will have to create a end-point that returns the data you need for your chart:
Your router:
Route::get('/chart/get-data', [ ControllerName::class, 'getChartData' ]);
Your controller method:
public function getChartData() {
$chartData = [];
// Your logic goes here
return $chardData;
}
In your javascript (using jquery) file there will be something like that:
function loadChartData() {
$.ajax({
'url': '/chart/get-data',
'method': 'GET'
})
.done((data) => {
// Load your chart here!!!
})
.fail(() => {
console.log("Could not load chart data");
});
}
Hope I helped ;)

Using data tables from themes E.g. Front theme

How do I use this data table with mvc to get my data from the controller to the view:
<script>
$(document).on('ready', function () {
// initialization of datatables
$.HSCore.components.HSDatatables.init('.js-datatable');
});
</script>
Make sure all classes and div wrappers are in acquisition.

Ember event in one view update another?

I have a small extract from my Ember app here. My page contains a number of views each containing different data each with their own controllers.
I want a search field (in index view) to go in one view which should "talk" to the stationList controller to update the content of the stationList view. This doesn't work. I get an error: TypeError: this.get(...).search is not a function
The logging outputs the name of the contoller I've asked it to use: App.StationListController
I added a second search form inside on the StationList View. This one works just fine. The logging this time outputs a dump of the StationListController object. So I am guessing that the other search form, despite my code (in SearchFormView): controllerBinding : 'App.StationListController', is not correctly setting the controller.
So I guess my question is why not?
How can I route the change on the form field in the one view to call a funciton on another view's controller?
Here's my code:
<script type="text/x-handlebars" data-template-name="application">
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
<div id="searchForm">search form view search:
{{#view App.SearchFormView}}
{{view App.StationSearchField}}
{{/view}}
</div>
<div id="stationList">{{render stationList}}</div>
</script>
<script type="text/x-handlebars" data-template-name="stationList">
station list view search: {{view App.StationSearchField}}
<ul>
<li>List</li>
<li>will</li>
<li>go</li>
<li>here</li>
</ul>
{{searchTerm}}
</script>
And
App = Ember.Application.create({})
App.SearchFormView = Ember.View.extend({
init : function()
{
console.log("SearchFormView init", this.get('controller'))
}
})
App.StationSearchField = Ember.TextField.extend({
keyUp: function(event) {
var searchTerm = this.value
console.log("value",searchTerm,this.get('controller'))
this.get('controller').search(searchTerm)
}
})
App.StationListController = Ember.ArrayController.extend({
content : [],
searchTerm : null,
search : function(term)
{
this.set("searchTerm",term)
console.log("searching",term)
}
});
Fiddle: http://jsfiddle.net/ianbale/8QbrK/14/
I think the controllerBinding stuff is from the older version, I don't think that works anymore.
You can use controllerFor on get('controller') in the StationSearchField.
this.get('controller').controllerFor('station_list').search(searchTerm)
But controllerFor is deprecated and may be removed. Depending on your application structure you use needs on the controller.
Another way which I am using, is to send a custom event from the View, which the Route then sends to the corresponding controller.
App.IndexRoute = Ember.Route.extend({
events: {
search: function(term) {
controller = this.controllerFor('station_list')
controller.search(term);
}
}
});
and dispatch a search event from view like so.
this.get('controller').send('search', searchTerm);
The advantage of this method is you dispatch the same event from multiple places and it would get handled in the same way.
Here's the updated jsfiddle.

get content in view from ContentBinding

I've got problem with new Ember.js (1.0 pre)
I got something what worked on Ember 0.9.8 but when I changed version of this lib I noticed problem which can't resolve. (I'm not so good at Ember :/)
Here is sample code:
http://jsfiddle.net/ETQCc/5/
I created view:
<script type="text/x-handlebars" data-template-name="MyView">
{{s}} / {{content.s}} / {{this.s}} / {{view.s}}
</script>
App.myview = Em.View.extend({
layoutName : "MyView",
});
And I'd like to show some varible which depends on what I set in content bindig:
<script type="text/x-handlebars">
xx{{view App.myview contentBinding="App.ctrl"}}
</script>
How to get to varible in this controller?
You have two ways to do that.
You can :
bind the controller to your view instead of binding the content (see the JSFiddle). By doing that you set the context of the view to be the controller, so {{s}} works directly:
{{view App.myview controllerBinding="App.ctrl"}}
edit your template to get the variable from the view instead of its context (see this JSFiddle). By doing that the view content is binded to the controller, and your template shows the s property of the view content:
{{view.content.s}}
I suggest you to take a look at Ember.js View Context changes.
I found the answer...
I should use:
{{view.content.s}}

Ember.js: How do I access a specific item in a CollectionView?

First off I want to say that I really like ember.js. I have tried both Knockout and Angular but found them a bit to obtrusive and everything had to be done their way. I feel like ember allows me a bit more freedom to structure things how you see fit. With that said I have a couple of questions.
1. I would like to do something like the following which obviously doesn't work:
<h3>{{ content.name }}</h3>
Instead I would have to create a binding:
<a {{ bindAttr href="url" }}><h3>{{ content.name }}</h3></a>
How do i create the url path in the view? I could easily create a computed property called url on the model but that feels horrible and not very MVC. Do I have to create a new view for the element or register a helper which feels a bit cumbersome?
Here's the complete code:
App = Ember.Application.create();
var sampleData = [ Ember.Object.create({ id: '123456789', name: 'John' }), Ember.Object.create({ id: '987654321', name: 'Anne' }) ]
App.itemController = Ember.ArrayController.create({
content: sampleData,
removeItem: function(item) {
this.content.removeObject(item);
}
});
App.ItemListView = Ember.View.extend({
itemDetailView: Ember.CollectionView.extend({
contentBinding: 'App.itemController',
itemViewClass: Ember.View.extend({
tagName: 'li',
url: '' // HOW TO GET '/item/123456789'
deleteButton: Ember.Button.extend({
click: function(event) {
var item = this.get('content');
App.itemController.removeItem(item);
}
})
})
})
});
<script type="text/x-handlebars">
{{#view App.ItemListView}}
<ul id="item-list">
{{#collection itemDetailView}}
<div class="item">
<a {{ bindAttr href="url" }}><h3>{{ content.name }}</h3></a>
{{#view deleteButton class="btn" contentBinding="content"}}Delete{{/view}}
</div>
{{/collection}}
</ul>
{{/view}}
</script>
2. I feel that the view "owns" the controller and not the other way around. Shouldn't the view be unaware of which controller it is hooked up to so you can reuse the view? I'm thinking about these to lines in the view:
contentBinding: 'App.itemController',
and
App.itemController.removeItem(item);
How do you structure this?
3. I realize everything is a work in progress and quite new with the name change and all but the documentation is quite unclear. The examples use the old namespace SC and there are lot of things missing on emberjs.com compared to the Sproutcore 2.0 guides, for example collections, arraycontrollers. I read somewhere here that collections will be phased out. Is that true and should I use #each instead?
Thanks for your help and for an awesome framework!
1.) If you want to use <a href="...">, you will need a computed property. It could be on your model or on a view. Another technique would be to use Ember.Button: {{#view Ember.Button tagName="a" target="..." action="..."}}...{{/view}}
2.) Typically you'll want to declare your controller binding in the template, rather than in the view. For example: {{#view App.ItemListView contentBinding="App.itemController"}}
3.) The #collection helper will likely be deprecated, so you should probably use an #each instead.

Resources