I have the following template:
<a data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui btn-right" data-theme="e"></a> <p id="msg"></p>
which is loaded from the following view:
define(['backbone', 'marionette', 'jquery', 'jquerymobile', 'hbs!templates/Popup'],
function (Backbone, Marionette, $, jqm, template) {
return Backbone.Marionette.ItemView.extend({
attributes: function() {
return {
// For dialogs to work correctly, url will need to be unique
'id' : 'popupMsg',
'data-role': 'popup',
'class': 'ui-content'
};
},
template: template,
initialize: function() {
_.bindAll(this);
},
onBeforeRender: function(){
this.$el.find("#msg").text("{{$ message}}");
}
});
});
I try to add some text in the #msg element of the template by adding the code above in OnBeforeRender event. The reason is that I want to pass a string to be localized from handlebars before the view is rendered.
Is that possible?
Thanks
Unfortunately, the #msg element won't exist until the view is rendered, so trying to set its text in onBeforeRender won't work.
Why can't you make the handlebars expression just a part of the template?
Related
I need to call a view in a Laravel Controller, with parameters and with Anchor Tag.
I have this code in my controller:
return view('plans/editPlanView',
['plan' => $plan,
'patient' => $patient,
'aliments'=>$aliments, 'menu'=>$menu, 'tabName'=>$tabName]);
But i need to add an Anchor tag to land in a specific section of the page.
I can't use
return Redirect::to(URL::previous() . "#whatever");
proposed in other posts because i need to pass some parameters.
I think there are some base problem, trying with console this:
$('html, body').animate({
scrollTop: $('#whatever').offset().top
}, 1000);
scrolling to the desired section does not work.
it seems the page makes a small snap but always returns to the top.
Update
I have found the cause of the problem. At the bottom of the blade page I have the following code, without it the anchor tag works fine. Adding it the page makes a small scroll to return to the head. I need to use the datepicker, how can I fix the problem and get the anchor tag to work?
#push('scripts')
<script type="text/javascript">
$(document).ready(function () {
$('.date').datepicker({
firstDayOfWeek: 1,
weekDayFormat: 'narrow',
inputFormat: 'd/M/y',
outputFormat: 'd/M/y',
markup: 'bootstrap4',
theme: 'bootstrap',
modal: false
});
});
</script>
#endpush
You can create the method showPage() in your contoller for example TestController
public function showPage(Request $request)
{
$plan = $request->plan;
...
return view('plans/editPlanView', [
'plan' => $plan,
'patient' => $patient,
'aliments'=>$aliments, 'menu'=>$menu, 'tabName'=>$tabName
]);
}
Then create a route for rendering that view
Route::get('/someurl', 'TestController#showPage')->name('show-page');
And then in your methods you can use something like that:
$url = URL::route('show-page', ['#whatever']);
return Redirect::to($url)
I found a workaround, I added the disable attribute to the date input, in doing so, when the datepicker is initialized, the page does not scroll up. Then, as a last javascript statement I re-enabled the fields:
$('.date').prop("disabled", false);
I have some vuejs events.
<div #mouseover="activate" #mouseout="deactivate" class="item featured">
They work fine but when the content is loaded in via a simple jquery load() it does not trigger. How can I defer these events in vuejs?
edit:
The load is triggered by clicking the nav
<li v-on:click="filterTalents" data-department="hardware">
filterTalents: function(event) {
var dept= $(event.target).closest('li').data('department');
$( ".content" ).load( "includes/"+dept+".html", function()
});
},
activate: function(event) {
$(event.target).closest('.item').addClass('active');
},
deactivate: function(event) {
$(event.target).closest('.item').removeClass('active');
},
Given that you want to add class dynamically to an element, you can use dynamic class binding provided by vue.
A simple example would be to pass an object to v-bind:class to dynamically toggle classes:
<div v-bind:class="{ active: isActive }"></div>
The above syntax means the presence of the active class will be determined by the truthiness of the data property isActive.
I'm trying to create a directive that would enhance an HTML element. So I managed to get the directive to run and to be associated with the element My current code is something like this:
angular.module('myModule', [])
.directive('myDirective', function() {
return {
restrict: 'C',
replace: false,
scope: {},
link: function(scope, element, attrs) {
}
}
});
Now I would like to add new methods to the HTML element, for example I would like to do this:
// Pseudo code
myElement.reset();
myElement.reload(); // etc.
What would be the best way to add these methods to the directive?
Adding new methods to elements is not the Angular way. The angular way would be creating object with fields, passing it to directive and watch for field changes inside directive. Here is simple example: http://plnkr.co/edit/5v5mN69Bu18jpnoGwYqj?p=preview
Your example of your directive is very basic, so I can't see what do you want to achieve.
At least I can say: You can define new functions as functions of the scope , e.g.
...
link: function(scope, element, attrs) {
scope.reset = function() {
// reset something
}
// ...
}
If you want to access data loaded (e.g. for use in function reload()) in the scope you should write a controller for this use. so you can inject a service as a data source.
Implementing functions bound to elements directly is more the jQuery way to do not the angularjs one. In angularjs you work with scopes mainly.
Maybe you provide a more complete example at best using jsfiddle or plnkr, I think it easier to help to see your use case or your problem as a piece of working code.
One way to add these methods to your directive is to make the directive a controller (aka a subview). The $scope param in the controller will give you bi-directional access to the HTML in the template:
For example:
.directive("myDirective", function() {
var controller = ['$scope', function teamCountCtrl ($scope)
{
$scope.reset = function() {
// modify $scope.obj
};
$scope.reload = function() {
// modify $scope.obj
};
}];
return {
replace: true,
templateUrl: 'js/directives/teamCount.html',
scope: {
obj: '='
},
controller: controller
}});
Then in the template HTML you can call reset() or reload():
<div>
<a tabindex=-1 class="btn" href="#" ng-click="reset()">
<i class="fa fa-fw"></i>
</a>
<a tabindex=-1 class="btn" href="#" ng-click="reload()">
<i class="fa fa-fw"></i>
</a>
I am attempting to display some information from my controller into my view, but the information is not being displayed.
I have a fiddle to demonstrate my code so far:
Fiddle
If I check in the console for MovieTracker.movieController.content, the 2 objects do show up. However, the HTML is not showing up correctly. What could be the problem?
Here is my View:
<script type="text/x-handlebars">
{{#each MovieTracker.movieController}}
<h2>{{title}}</h2>
<h3>{{rating}}</h3>
{{/each}}
And my Ember Application + Controller:
// Create our Application
MovieTracker = Ember.Application.create();
// Inherit outlet Support
MovieTracker.ApplicationController = Ember.Controller.extend();
// ArrayController to create some new Movies
MovieTracker.movieController = Ember.ArrayController.create({
content: [],
init: function(){
var kidsMovie = MovieTracker.Movie.create({
title: 'Toy Story',
rating: 4
});
this.pushObject(kidsMovie);
var avengers = MovieTracker.Movie.create({
title: 'The Avengers',
rating: 5
});
this.pushObject(avengers);
}
});
// Start our Ember Application
MovieTracker.initialize();
I've updated your fiddle (see here: http://jsfiddle.net/schawaska/hKPQy/24/) to have a "movies" view binding to your controller instance, and also added a content property binding to the controller content. Also added the references to latest version of ember and handlebars.
Now you have a couple of templates:
<script type="text/x-handlebars" data-template-name="application">
<h1>Movie Tracker</h1>
{{view MovieTracker.MovieTrackerView }}
</script>
<script type="text/x-handlebars" data-template-name="movie-tracker">
Movies:<br />
{{#each movie in content}}
<h2>{{movie.title}}</h2>
<h3>{{movie.rating}}</h3>
{{/each}}
</script>
Now your each helper will iterate through a collection assigning each value to movie, which is your model (that was missing too, so I've created one) and its properties.
Your controller and view look like this:
MovieTracker.moviesController = Ember.ArrayController.create({
content: [],
init: function(){
// you missed the call to _super()
this._super();
var list = [
MovieTracker.MovieModel.create({
title: 'Toy Story',
rating: 4
}),
MovieTracker.MovieModel.create({
title: 'The Avengers',
rating: 5
})];
// also, it's a good idea to use .set whenever you can
this.set('content', list);
}
});
MovieTracker.MovieTrackerView = Em.View.extend({
templateName: 'movie-tracker',
controllerBinding: 'MovieTracker.moviesController',
contentBinding: 'controller.content'
});
I have to write a simple plugin for ajax load.
Page code. (result by razor)
<a ajaxLoad="page" href="/Brand">Brand List</a>
<div id="plc1">
some content
</div>
<script type="text/javascript">
$(function () {
$("#plc1").ajaxPageLoad();
});
</script>
In js code.
jQuery.fn.ajaxPageLoad =
function () {
$('a[ajaxLoad*="page"]').click(function () {
$(this).empty();
$(this).load(this.href);
return false;
});
}
in page without this implementation empty() work properly but plug-in there is no effect.
what is wrong?
Thanks.
Seems that you're hoping this will refer to both the div and the a at the same time.
If I understand your code, you want to empty the element on which your plugin was called when the <a> element is clicked.
Currently, in the click() handler, this is the <a> element. You need to retain a reference to the <div> against which your plugin was called outside the handler.
jQuery.fn.ajaxPageLoad = function() {
// reference the <div> container (or whatever it ends up being)
var container = this;
$('a[ajaxLoad*="page"]').click(function() {
container.empty(); // empty the container
container.load( this.href ); // load into the container from the href
return false; // of the <a> that was clicked
});
};
$(function() {
$("#plc1").ajaxPageLoad();
});