Develop Reference

Handlebars lookup to make an href

I am trying to make a mod on an existing app. All I want to do is create an href that contains a url, but using the handlebars lookup function. When I try it just returns a blank value.
Here is my function:
var cardLink = function generateCardLink() {
var url = `"url/container-scan-reports/${vendor}/${product}/${image}"`
return url;
}
//...
res.render('vendor', {
title: 'Vendor Images',
images: images,
tags: tags,
cardLink: cardLink
});
I am then trying to pass in href this way on the top div of template.
<div class="row row-cards-pf ">
{{#each images}}
<div href={{lookup ../cardLink #index }} class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<div class="card-pf card-pf-view card-pf-view-select card-pf-view-single-select">
<div class="card-pf-body">
<div class="card-pf-top-element">
<span class="pficon-image card-pf-icon-circle"></span>
</div>
<h2 class="card-pf-title text-center">
{{ this }}
</h2>
<div class="card-pf-items text-center">
<div class="card-pf-item">
{{{ lookup ../tags #index}}}
</div>
</div>
<!-- <p class="card-pf-info text-center"><strong>Most recent image</strong> {{ lookup ../mostRecentImages #index}}</p> -->
</div>
<div class="card-pf-view-checkbox">
<input type="checkbox">
</div>
</div>
</div><!-- /col -->
{{/each}}
Can anyone help me?

You don't need lookup in this case. I think you want to display the url, so #index is not the right reference. Try it this way:
<div href={{../cardLink}} class="col-xs-12 col-sm-6 col-md-4 col-lg-4">

Plugin not applying changes on ngFor directed div Angular 5.2

I've been searching for the solution for a few days but unable to find one that works. The issue is that this div which has a class ish-container-inner, is linked to a js plugin which works only with this code below:
<div class="ish-container-inner ish-product">
<div class="ish-main-content ish-pflo-gal ish-scroll-anim ish-2col ish-square ish-content-parallax">
<div class="ish-item">
<div class="ish-item-container">
<div class="ish-caption-container">
<div class="ish-caption">
<span class="ish-h4 ish-txt-color9">Special Effects</span> <span class="ish-separator">/</span> <span>Ink</span></div>
</div>
<div class="ish-img">
<img src="assets/img/bniinks-003.jpg" alt="Project">
</div>
</div>
</div>
</div>
</div>
But as soon as I'll put *ngFor like below, it won't work. Even with ngIf present:
<div class="ish-container-inner ish-product" *ngIf="products">
<div class="ish-main-content ish-pflo-gal ish-scroll-anim ish-2col ish-square ish-content-parallax">
<div class="ish-item" *ngFor="let product of products">
<div class="ish-item-container">
<div class="ish-caption-container">
<div class="ish-caption">
<span class="ish-h4 ish-txt-color7">{{ product.name }}</span> <span class="ish-separator">/</span> <span>Ink</span>
</div>
</div>
<div class="ish-img">
<a href="product-detail.html" class="ish-img-scale" [style.background]="'url('+product.thumbnail+')'">
<img src="{{product.thumbnail}}" alt="Project"></a>
</div>
</div>
</div>
</div>
</div>
I have valid data at this point in products but the plugin is not working for these div elements. I don't know why. Without the ngFor directive. Div is assigned some stylings automatically which are changed by the plugin on scroll i.e.
<div class="ish-main-content ish-pflo-gal ish-scroll-anim ish-2col ish-square ish-content-parallax" style="position: relative; height: 629px; margin-top: -99.5455px;" data-initial-top="0">
But if I put ngIf or ngFor directive. It doesn't work anymore and these stylings are not assigned automatically. Awaiting response :)

Why does my view not update when changing scope variable?

Navbar (main.html):
<nav class="navbar navbar-dark bg-primary">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapseEx2">
<i class="fa fa-bars"></i>
</button>
<div class="container" ng-controller="UpComingGamesCtrl">
<div class="collapse navbar-toggleable-xs" id="collapseEx2">
<a class="navbar-brand" href="#/">VideoGame Releases</a>
<form ng-submit="searchGame()">
<input type="text" id="form1" class="form-control" ng-model="gameToSearch">
</form>
</div>
</div>
</nav>
Controller:
...
$scope.games = [];
$scope.searchGame = function () {
if ($scope.gameToSearch) {
console.log('entered with text');
getUpcomingGames.getGame($scope.gameToSearch).get({}, function (data) {
$scope.games = data.results;
});
}
}
upcoming_games_template.html:
<div class="row" ng-repeat="games in games | chunkBy:3">
<div class="col-md-4" ng-repeat="game in games">
<div class="card">
<div class="view overlay hm-white-slight card-image">
<img src="{{game.image.screen_url}}" class="img-fluid" alt="">
<a href="#/">
<div class="mask waves-effect waves-light"></div>
</a>
</div>
<div class="card-block">
<h4 class="card-title">{{game.name}}</h4>
<p class="card-text">{{(game.original_release_date | limitTo: 10) || getFutureReleaseDate(game) }}</p>
Read more
</div>
</div>
</div>
</div>
I am trying to create a search function on my navbar in my main.html file and when the user presses the enter key, I get the info from an external API using that search and update the upcoming_games template. Now, I know I enter the function "searchGame" because it logs to console and I know the data I get back is good. But when i try to change the variable "$scope.games = data.results;", the view does not update.
Now if I create the same search bar form inside the upcoming_games_template.html it works perfectly.
Why does this happen ? I'm declaring the controller in my main.html file, so it should work the same, right ?
I also don't think I need the $scope.$apply() in this situation.
Thank you.

Probably you're using two different controllers, so you're filling the $scope.games variable of a controller while you would fill the $scope.games variable of the other controller. If you provide a jsfiddle it could be simpler. If you want a fast solution you should try to use a $rootScope.games variable and repeat over the same rootscope variable :
<div class="row" ng-repeat="games in $root.games | chunkBy:3">
<!-- Content -->
</div>
This is not the better solution but it should works.

VueJS $els command returns null

I created the following structure:
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-md-7 mapContainer">
<div class="GISMap" v-el:map></div>
</div>
<div class="col-md-5 incidentContainer">
<div class="incidentForm">test</div>
</div>
</div>
</div>
</div>
In my JS i want to get an element from the DOM:
init: function() {
initGISMap(this.$els.map);
}
But the this.$els.map does not return a value. Therefore googlemaps cannot initialize. I placed the v-el:map attribute into my div GISMap. Therefore I think it should be found. Did I miss something?

Generate link based on data attributes

I am trying to write a little jQuery script that checks a set of div's to see if they have a data-name attribute. For the ones that have a data-name, it will create a link. The href of that link should be the name of the data-value plus contain the file extension (eg. .txt).
Everything seems to work OK except when I try to add the data value onto the link. The ultimate result of this script is to output something like this for each of those div's:
<p class="data-link">Edit
Below is my script. I have identified that area that I am having issue with.
var dataNameWrappers = $("div#desktopSidebar div[data-name]");
dataNameWrappers.each(function() {
var dataNameWrappers_action = "" + $(this).attr("data-name");
$(this).prepend("<p class='edit-link'><a>Edit</a></p>");
var dataNameWrapperEditLink = $("div#desktopSidebar p.edit-link a");
dataNameWrapperEditLink.each(function() {
$(this).attr('href', <<stuck_here>>);
});
});
Any help will be great.
Thanks
As requested, here is my sidebar HTMl structure
<div id="desktopSidebar">
<div class="sidebar userbox">
<h3 class="sidebarheader"> Welcome {{username}}}</h3>
</div>
<div data-name="social_media_sitewide" class="sidebar socialmedia">
<h3 class="sidebarheader">Follow Tennis-Chat</h3>
</div>
<div data-name="site_promotions" class="sidebar promotions">
<h3 class="sidebarheader">Current Promotions</h3>
</div>
<div data-name="livescores" class="sidebar Livescores">
<h3 class="sidebarheader">Live Scores</h3>
</div>
<div class="sidebar tournaments">
<h3 class="sidebarheader">Tournaments</h3>
</div>
<div data-name="featured-profiles" class="sidebar profiles">
<h3 class="sidebarheader">Today's Profile: {{featured_profile_name}}</h3>
</div>
<div data-name="side_advertisment" class="sidebar Advertisement">
<h3 class="sidebarheader">Advertisement</h3>
</div>
<div class="sidebar Headlines">
<h3 class="sidebarheader">Tennis-Chat Headlines</h3>
</div>
<div class="sidebar mostrecent" id="mostRecentTopics">
<h3 class="sidebarheader">Most Recent Posts</h3>
</div>
</div>

I don't know why you are using a second loop to add the HREFs when you already have everything you need.
Working fiddle here: http://jsfiddle.net/Q4j8S/.
HTML:
<div id="desktopSidebar">
<div class="sidebar userbox">
<h3 class="sidebarheader"> Welcome {{username}}}</h3>
</div>
<div data-name="social_media_sitewide" class="sidebar socialmedia">
<h3 class="sidebarheader">Follow Tennis-Chat</h3>
</div>
<div data-name="site_promotions" class="sidebar promotions">
<h3 class="sidebarheader">Current Promotions</h3>
</div>
<div data-name="livescores" class="sidebar Livescores">
<h3 class="sidebarheader">Live Scores</h3>
</div>
<div class="sidebar tournaments">
<h3 class="sidebarheader">Tournaments</h3>
</div>
<div data-name="featured-profiles" class="sidebar profiles">
<h3 class="sidebarheader">Today's Profile: {{featured_profile_name}}</h3>
</div>
<div data-name="side_advertisment" class="sidebar Advertisement">
<h3 class="sidebarheader">Advertisement</h3>
</div>
<div class="sidebar Headlines">
<h3 class="sidebarheader">Tennis-Chat Headlines</h3>
</div>
<div class="sidebar mostrecent" id="mostRecentTopics">
<h3 class="sidebarheader">Most Recent Posts</h3>
</div>
</div>
JavaScript:
var dataNameWrappers = $("div#desktopSidebar div[data-name]");
dataNameWrappers.each(function() {
var dataNameWrappers_action = $(this).attr("data-name");
console.log('data-name ' + dataNameWrappers_action);
$(this).prepend('<p class="edit-link">Edit</p>');
/* Don't need this
var dataNameWrapperEditLink = $("div#desktopSidebar p.edit-link a");
dataNameWrapperEditLink.each(function() {
$(this).attr('href', dataNameWrappers_action);
});
*/
});

Instead of iterating through the a tags after you do the prepend, it may be better to make the HTML fragment with the desired href attribute.
Here is the code that accomplishes that:
$('#desktopSidebar .sidebar[data-name]').each(function(index, el){
var href = $(el).attr('data-name') + ".txt";
$(el).prepend('<p class="edit-link">Edit');
});