We Keep Coding

EmberJS template component suddenly not rendering on page

I'm following this Ember tutorial and I've suddenly run into an issue where my rental-listing.hbs template component stops rendering. It started when I began implementing the map service.
I don't understand where this could be happening. I've copied the code from parts of the GitHub repository that I thought were relevant but to no avail.
I have a rental.hbs template that looks like so:
<div class="jumbo">
<div class="right tomster"></div>
<h2>Welcome!</h2>
<p>We hope you find exactly what you're looking for in a place to stay.</p>
{{#link-to "about" class="button"}}
About Us
{{/link-to}}
</div>
{{outlet}}
Which in turn has a template component called rental-listing.hbs:
<article class="listing">
<a
onclick={{action "toggleImageSize"}}
class="image {{if this.isWide "wide"}}"
role="button"
>
<img src={{this.rental.image}} alt="">
<small>View Larger</small>
</a>
<div class="details">
<h3>{{link-to this.rental.title "rentals.show" this.rental class=this.rental.id}}</h3>
<div class="detail owner">
<span>Owner:</span> {{this.rental.owner}}
</div>
<div class="detail type">
<span>Type:</span> {{rental-property-type this.rental.category}} - {{this.rental.category}}
</div>
<div class="detail location">
<span>Location:</span> {{this.rental.city}}
</div>
<div class="detail bedrooms">
<span>Number of bedrooms:</span> {{this.rental.bedrooms}}
</div>
</div>
<LocationMap #location={{this.rental.city}}/>
</article>
The only thing I have added to the above is the line <LocationMap #location={{this.rental.city}}/> but it still doesn't work if I remove it.
The console shows me no errors and I can actually see I am getting the three dummy objects I want from Mirage:
So I'm definitely getting the objects and from what I see I'm doing everything necessary in the templates to render it but they aren't. Should I be looking somewhere else?

Are you able to provide a link to your example? By having each piece of the ember application you mention it would be best to answer definitely. I can give a general answer with strategies for debugging the template.
The conventions behind ember.js make understanding the "whys" frustrating at first and possibly opaque. Ember's handlebars implementation governs how values are populated and accessed within templates using very specific rules. Ember treats templates (handlebars files) differently depending on whether it is for a route or component. Component's have an isolated context and must receive values by explicit passing in or dependency injection. Then, you can use such values in a component's template by accessing those properties with {{this.somePassedInValue}}.
In the super-rentals app, it appears the rental index route invokes the components responsible for displaying the individual units. I found this in app/templates/rentals/index.hbs.
<li><RentalListing #rental={{rentalUnit}} /></li>
The route template iterates over the list of filteredResults. Each of these is the rentalUnit. A good first step would be to use the {{log}} helper to print out that the value of rentalUnit to ensure it is what you expect.
Alternatively, you could try cloning https://github.com/ember-learn/super-rentals and applying the changes you want to make step by step from the master branch. By doing so, you could easily undo a single change to see what caused something to not show up as expected.

<LocationMap #location={{this.rental.city}}/>
to be written as below
<LocationMap #location={{this.rentals.city}}/>
may be typo error.
also repeat this for there place in that template.
Because the model name in the console is rentals not rental

How to make Laravel/Vue implementation show individual entry

I'm trying to integrate Laravel with Vue, and further down the line Nuxt, in the hope that I can integrate snazzy page transitions like the ones shown on http://page-transitions.com into my websites.
I've been reading a tutorial about using Vue with Laravel; https://scotch.io/tutorials/build-a-guestbook-with-laravel-and-vuejs, and I was pleased to find that Laravel ships with a Vue implementation, so I thought there'd be quite a lot of info on how to use the two in combination, but there doesn't seem to be.
I completed the tutorial and made the guestbook as it was described. I'm now trying to build upon that.
Specifically, Im trying to create individual pages for each of the guestbook entries.
I do have quite a bit of experience using Laravel, but only what I've described above with Vue.
So, in order to create the individual pages, I've created a new route in the routes/web.php file;
Route::get('signature/{id}','SignaturesController#show')->name('signature');
I've then created a new code block in app/Http/Controllers/SignaturesController.php to deal with this request;
public function show()
{
return view('signatures.signature');
}
I've created the specified view in resources/views/signatures/signature.php;
#extends('master')
#section('content')
<div class="container">
<div class="row">
<div class="col-md-12">
<signature></signature>
</div>
</div>
</div>
#endsection`
And I've created the vue file that should integrate with this view in resources/assets/js/components/Signature.vue;
<template>
<h1>Signature</h1>
</template>
<script>
export default {
}
</script>
Finally, I've registered the component in resources/assets/js/app.js and reran npm run dev.
This has worked to an extenet, I can view the file at the expected url; http://transitions.localhost/signature/1.
My question is, how do I get the data related to the signature with the ID of 1 into the page? I can't even echo out {{ id }} or {{ signature }}.
Any other resources that you've found helpful regarding this subject would also be greatly appreciated. Thanks for taking the time to read through all of that, does anyone know where I go from here?

You will need to pass the data to your vue component
Maybe something like this?
In your view:
#section('content')
<div class="container">
<div class="row">
<div class="col-md-12">
<signature :signature="{{ $signature }}"></signature>
</div>
</div>
</div>
#endsection
In your vue component:
<template>
<h1>This signature has the ID of: {{ signature.id }}</h1>
</template>
<script>
export default {
props: ['signature']
}
</script>

Multiple Controller throwing error in my Angular JS application

I am a beginner in Angular JS. I know that below declaration is required in the js file to make angular JS Controller work.
var app = angular.module('myApp', []);
app.controller('ctrlOne', function(){
});
But recently got some code from internet where the declaration is not made for the app and controllers like above. But there are only controller function defined, still working fine but not in my case.
function ctrlOne($scope){
};
function ctrlTwo($scope){
};
Please find my code below and output. Please correct me.
<div ng-app>
<input type="text" ng-model="data.message" />
<h1>{{ data.message }}</h1>
<div ng-controller="ctrlOne">
<input type="text" ng-model="data.message" />
<h1>{{ data.message }}</h1>
</div>
<div ng-controller="ctrlTwo">
<input type="text" ng-model="data.message" />
<h1>{{ data.message }}</h1>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="App.js"></script>
App.js:
function ctrlOne($scope){
};
function ctrlTwo($scope){
};
Please can any one help me to figure out where I went wrong. Your advice's are welcomed.
Please find JSFIDDLE Link : Have done above coding here

Change your html to include myApp module name like so:
<div ng-app="myApp">
...
<div ng-controller="ctrlOne">
<input type="text" ng-model="data.message" />
<h1>{{ data.message }}</h1>
</div>
...
</div>
Angular needs to know what is the name of your root module. ng-app directive specifies just that:
Use this directive to auto-bootstrap an AngularJS application. The
ngApp directive designates the root element of the application and is
typically placed near the root element of the page - e.g. on the
<body> or <html> tags.

There are two ways of initializing an angular app. One is to define ng-app in html or you can manually bootstrap angular app.
You need to figure out where is the app getting initialized. Because in your html you are using ng-app=''. you should provide it with app name.

Load angular template on some event

I'm quite new to angular and frontend in general, but what i'd like to see is something similar to what routing with ngView gives, but without routing, i.e just load a template on some event. To be more specific, let's say i have an input field somewhere in the header and when i click/focus on this field a special panel with different input options shows up. The trick is that this input field and other elements are already a part of a template which is loaded into ngView, so as i understand i can't use another ngView for options pane.

use ngIf, ngShow, ngHide, ngSwitch for stuff like that
<button ng-click="showStuff = true">Show Stuff</button>
<button ng-click="showStuff = false">Hide Stuff</button>
<div ng-show="showStuff">Showing Stuff</div>
<div ng-hide="showStuff">Hiding Stuff</div>
Have a look at this plunker for a quick and dirty, working example.
Note that the showStuff variable is just magically created by angular on the root scope, since I'm not using a controller.

You can load templates with ng-if and ng-include like this example:
<body ng-app="app">
<div class='container'>
<button ng-click='tmpl = true' class='btn btn-info'>Load template!</button>
<div ng-if='tmpl'>
<div ng-include="'template.html'"></div>
</div>
</div>
</body>
The ngIf directive will add element to the DOM when the argument expression is true. Then, the angular will compile the inner directive ngInclude, loading the template.

ng-include is being called far too often

I've discovered that when I use ng-include it gets called far too often.
Every time you click one of the Nothing buttons or change Views, or type something in the input box, getView gets run several times. Up to 6 times when changing views. Basically doing anything that alters the $scope will generate a call to getView.
I've created a plunker to show the behavior I'm describing: plnkr.co
Is this normal behavior and is there any way to make it only run once? I'm worried I may be losing performance due to this.
MY CODE:
index.html
<body ng-app="includeExample">
<div ng-controller="ExampleController">
<div class="row">
<input type="text" ng-model="unrelated">
</div>
<div class="row">
<tabset>
<tab heading="View 1">
<ng-include src="getView('template1')"></ng-include>
</tab>
<tab heading="View 2">
<ng-include src="getView('template2')"></ng-include>
</tab>
</tabset>
</div>
</div>
</body>
Script.js
angular.module('includeExample', ['ngAnimate', 'ui.bootstrap'])
.controller('ExampleController', ['$scope',
function($scope) {
$scope.getView = function(filename) {
console.log("getView " + new Date());
return filename + ".html";
};
}
]);
Template1.html
Content of template1.html
<button type="button" class="btn btn-primary" ng-click="">Nothing</button>

Angular is calling your getView method each time a digest runs to make sure the value hasn't changed. This is part of the "magic" for how angular binds the model and the view together. If you look at the network tab for your development tools you will see that the template is not actually being retrieved by the browser each time the digest runs. Knowing that this is how the digest actually works - you should develop code accordingly running intensive operations in methods that are not directly bound to the view!
For more information on the digest itself see:
http://angular-tips.com/blog/2013/08/watch-how-the-apply-runs-a-digest/
https://docs.angularjs.org/guide/scope (search for "Scope Life Cycle")
https://www.ng-book.com/p/The-Digest-Loop-and-apply/
Hope that helps!

Yeah, angularJS will go through getView() every time you do anything. A good first iteration would be to assign it to a json object instead of using a get method. Actually, it's better if you don't use any get type methods in the html. Then if you really want it to not change, you can remove the 2 way binding (Render value without data-binding).