I recently learned about caching in Laravel in a video series and wanted to apply it to my projects.
In this example project, I'm using a Livewire fullpage component (index) with 2 "modal" components each containing a "select" component which selects all records of a database table as a dropdown.
//Select Component Render Method
public function render()
{
$this->options = $this->modelName::orderBy($this->attribute, 'ASC')->get();
return view('components.input-field.select');
}
Select_Component_Controller_Example
Select_Frontend_Example
My problem here is that this component is called in both the create modal and the edit modal.
This causes a duplicate database query to be executed.
Double_Query_Executed_DebugBar
Unfortunately I am not quite clear how to apply the caching correctly now, in the example below you can see what I am trying to achieve. I would be very grateful for tips on the problem or even tutorial suggestions on the subject of caching, as I do not yet understand the application to this properly.
public function render()
{
$this->options = cache()->remember("options", 20, function() {
$this->modelName::orderBy($this->attribute, 'ASC')->get();
});
return view('components.input-field.select');
}
try_to_accomplish
With kind regards,
Daniel
You must return the results in callback
$this->options = cache()->remember("options", 20, function() {
return $this->modelName::orderBy($this->attribute, 'ASC')->get();
});
Related
I was trying to export a hierarchical grid to excel. Just wanted to confirm if this is possible. Currently I was only able to export the parent grid. Please find the jsbin that I created for the issue here.
It's a little bit of work, but there's an example in the docs
I am attempting to get this working as well. In order to get the detail grids, they must be expanded. I am doing it this way, although it contains the correct data in hierarchical form, it is generating .xls file for each row! Maybe you can tweak? The exportGrid function is pulled from docs at link posted by Joe:
if (grid.options.excel.allPages) {
originalPageSize = grid.dataSource.pageSize();
originalHandler = grid.options.dataBound.name;
//show all
grid.dataSource.pageSize(grid.pager.dataSource._total);
grid.bind('dataBound', function (e) {
//expand all
toggleDetailGridRows('expand', $(grid.element).attr('id'));
grid.bind('dataBound', originalHandler);
});
setTimeout(function () {
ExcelHelper.exportGrid(e, grid);
grid.dataSource.pageSize(originalPageSize);
}, 2000);
}
else {
ExcelHelper.exportGrid(e, grid);
}
I just started using rivets js a couple of days before. So i am studying it. But got stuck myself
I have created a fiddle here
What i want to do is. I want to remove the data from the div and put another set of data's inside that
So at first the binding is working. But second time when i empty the div and once again bind Its not working
Created Fiddle
http://fiddle.jshell.net/m8j4ycj1/
function render() {
rivets.bind($("#hello"), datas);
return this;
}
rivets.bind($("#hello"), data);
setTimeout(function(){
debugger;
$("#hello").empty();
render();
},1000)
In this code the first binding is working but not after the setTimeout
as i understand you just want to empty the div?
so try to emtpy the model.
if data is:
data = { username: '12345' };
do
data.username = '';
and the view should be updated automatically
greez
I was watching a free interactive course published at angularjs.org to learn Angular, Shaping up with Angular js.
On this course at the very first chapter they say, one of the main reasons to use AngularJS is, it can build “Responsive” web apps. (I know about "Responsive Design" but that's totally a different thing), and explaining it saying that, with Angular you don’t need to refresh your web page to update it with the data getting from the web server (They tell you this, like this is brand new tech!).
I think isn’t that the same thing we did for last 10 years using Ajax? Or is this something totally different?
Please help me to understand this coz I'm new to AngularJS.
From my view “Responsive” web apps. means type of application that updates View regards to model change (MVC).
Angular application UI is full of watchers. For each variable wrapped by {{}} in HTML, Angular creates new watcher and when we update during code running this value, Angular, by using digest cycle updates view respectively. Or ng-repeat directive that creates separate scope per list item and adds watcher as well.
On other hand in pure Javascript I need find my element by id and update it manually.
Consider following example in Fiddle
HTML
<ul>
<li ng-click="loadGeo()">click 1</li>
</ul>
<ul> <pre>
data: {{data|json}}
</pre>
</ul>
JS
var app = angular.module('myModule', ['ngResource']);
app.controller('fessCntrl', function ($scope, Data) {
$scope.data = false;
$scope.loadGeo = function () {
Data.query()
.then(function (result) {
$scope.data = result.data.results[0];
}, function (result) {
alert("Error: No data returned");
});
}
});
app.factory('Data', ['$http', '$q', function ($http, $q) {
var address = 'Singapore, SG, Singapore, 153 Bukit Batok Street 1';
var URL = 'http://maps.googleapis.com/maps/api/geocode/json?address=' + address + '&sensor=true';
var factory = {
query: function () {
var data = $http({
method: 'GET',
url: URL
});
var deferred = $q.defer();
deferred.resolve(data);
return deferred.promise;
}
}
return factory;
}]);
On start we have empty data: $scope.data = false;
We click on button, we get Geo data from factory and populate data with Geo output. Our GUI updates without any additional code.
This approach I would call “Responsive” web app
I suggest you to read this great post written by Josh David Miller:
how-do-i-think-in-angularjs-if-i-have-a-jquery-background
There's a addPost function in my router. I don't want to re-create the postAddView every time the function is invoked:
addPost: function () {
var that = this;
if (!this.postAddView) {
this.postAddView = new PostAddView({
model: new Post()
});
this.postAddView.on('back', function () {
that.navigate('#/post/list', { trigger: true });
});
}
this.elms['page-content'].html(this.postAddView.render().el);
}
Here's the PostAddView:
PostAddView = backbone.View.extend({
events: {
'click #post-add-back': 'back'
}
, back: function (e) {
e.preventDefault();
this.trigger('back');
}
});
The first time the postAddView is rendered, the event trigger works well. However, after rendering other views to page-content and render postAddView back, the event trigger won't be trigger anymore. The following version of addPost works well, though.
addPost: function () {
var that = this, view;
view = new PostAddView({
model: new Post()
});
this.elms['page-content'].html(view.render().el);
view.on('back', function () {
delete view;
that.navigate('#/post/list', { trigger: true });
});
}
Somewhere you are calling jQuery's remove and that
In addition to the elements themselves, all bound events and jQuery data associated with the elements are removed.
so the delegate call that Backbone uses to bind events to your postAddView.el will be lost. Then, when you re-add your postAddView.el, there are is no delegate attached anymore and no events are triggered. Note that Backbone.View's standard remove method calls jQuery's remove; a few other things in jQuery, just as empty will do similar things to event handlers. So the actual function call that is killing your delegate could be hidden deep inside something else.
You could try calling delegateEvents manually:
this.elms['page-content'].html(this.postAddView.render().el);
this.postAddView.delegateEvents();
or better, just throw the view away and create a new one every time you need it. Your view objects should be pretty light weight so creating new ones should be cheap and a lot less hassle than trying to keep track of the existing views by hand.
If you really want to reuse the current DOM and View you do not need to set again and again the element as you are doing, everything that you call .html() you are destroying the DOM of the View and generating again and losing events. Also I prefer always to add the "el" in the DOM before render the View. I will have your function in this way:
addPost: function () {
if (!this.postAddView) {
this.postAddView = new PostAddView({
model: new Post()
});
this.postAddView.on('back', this.onBack);
this.elms['page-content'].html(this.postAddView.el);
}
this.postAddView.render();
},
onBack : function () {
this.navigate('#/post/list', { trigger: true });
}
I'm not fan of the use of local variables to refer to "this". If all of your Views uses _.bindAll(this) in the initialize method you could bind your events to your view and could use this(check how I transformed onBack).
With my code there is not a need to manually call this.delegateEvents()
I've got my models saving and updating using the regular save with a success callback.
But I'm trying to figure out how to define a separate add view depending on if the model is new, or an update to an already existing model.
This is not server side. I have the server create/update working fine, I'm trying to figure out what is the 'right' way to update the view.
My code is pretty straight forward
Myapp.FormInput = Backbone.Views.extend({
initialize: function(){...
},
submit_form: function(){
if(this.id===undefined){
// this is a new model, so create it
model.set(new Myapp.Model.set(Myapp.Models.Helpers.serialize_objects(form)));
model.set({parent_id:parent.id});
} else {
// this is an update to an existing model, so just update the model
model.set(Myapp.Model.set(Myapp.Models.Helpers.serialize_objects(form)));
model.url+='/'+this.id;
}
model.save(model,
{success: function(model){
Myapp.Collection.add(model);
}, error: function(){
alert('error creating or updating');
}}
});
});
What I like to do is initialize the 'View' from the router with a 'Model', if I am editing, and without a 'Model', if I am creating a new 'Model' from scratch.
The idea would be :
var Workspace = Backbone.Router.extend({
routes: { '/collection/:id' : 'edit_model',
'/collection/newObject' : 'new_model
},
new_model : function(){
myView = new A_View();
},
edit_model : function(){
myView = new A_View({model:aModel});
}
});
And then, in the 'render' method, check for a model in this view instance.
But.. this only works if your application use different routes for editing and creating models. Maybe you are doing everything in the same route in a most elaborate way (or you have other reasons).
You could try something like this:
Define your model.save 'success' function in the View (that is, in the same way that you define your submit_form in your example) and add a code line where you associate the model to this view:
successSaving : function( model ){
Myapp.Collection.add( model );
this.model = model; //here you save the model in your view.
}
In order this to work, you have to bind the view to your new success function (this is the reason you define it outside).
You could make it in the view initialize function like this (more information about '_bind' here):
_.bindAll(this, 'successSaving');
Now, in your 'render' method you can render the form and, after that, check if 'this.model' is 'undefined', if it is not, you know now that you have to fill the content.
Disclaimer: I have not checked the code, so probably a copy paste is not going to work but hopefully you can get the idea.