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>

Why I can not acces $scope value from MainController within index.cshtml?

I am trying to create AngularJS, MVC ASP.Net single page application so
I have created new folder within my project which contains
app.js:
var myApp = angular.module('app', []);
and another folder containing MainController.js:
myApp.controller("MainController",['$scope', function ($scope) {
$scope.naslov = "MP3 Manager"}]);
next, inside Views/Home I have added this in my div tag
ng-app="app" ng-controller="MainController"
and finally I got this:
<div class="row" ng-app="app" ng-controller="MainController">
<div class="col-md-6">
<h2>Pjesme</h2>
<p>{{ naslov }}</p>
<p>
ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
enables a clean separation of concerns and gives you full control over markup
for enjoyable, agile development.
</p>
<p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more »</a></p>
</div>
<div class="col-md-6">
<h2>Playliste</h2>
<p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
<p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more »</a></p>
</div>
when I run this app it shows {{ naslov }} instead of "MP3 Manager"
https://imgur.com/L1gmSBz
Why is this happening?

Make sure you have a reference to Angularjs, your app and your controller. I usually put the Angularjs reference and my app reference in my Layout.cshtml page, then the controller reference on the .cshtml page.
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/app/app.js"></script>
<script src="~/Scripts/app/MainController.js"></script>
You need all three.

maby you can try <p ng-model="naslov ">{{naslov }}<p>

Firstly I agree with Martin Welker. You can't declare ngApp and ngController on the same element. It is not good practice.
Secondly check whether Angular is properly loaded. You could have a problem in your BundleConfig.cs file. Small typos can cause these silly errors.
Run it and check your browser console for any errors.

Meteor publish and subscribe not working

I have a fairly novice question and am hoping someone can help me.
I have the following code in which subscribe/publish is not working:
if (Meteor.isServer) {
Meteor.publish('items', function () {
return Items.find({});
});
}
if (Meteor.isClient) {
Meteor.subscribe("items");
}
In my template:
<template name="items">
<div class="ui segment">
<div class="ui relaxed list">
{{#each item in items}}
<div class="item">
<img class="ui avatar image" src="http://placehold.it/20x20">
<div class="content">
<a class="header">{{item.text}}
</div>
<button class="delete">×</button>
</div>
{{/each}}
</div>
</div>
</template>
But nothing gets output. However when I add:
Template.items.helpers({
items: function () {
return Items.find({});
}
});
I do see the list properly. Why is this so? Also I am clearly confused as to why someone would want to use subscribe/publish along with the template helpers.

I suggest you read Data flow from the database to the UI: Three layers of Meteor
You are creating a publication labeled: items. Then you are subscribing to a publication labeled deals. This will not work as the labels must match for the subscription to work.
If adding that template helper then shows the data in the UI, you must have the autopublish package in your app. It will be autopublish, not your pub/sub, that is sending the client the data the client puts in it's mini-mongo Items collection.
So pub/sub gets the data from the server to the client, but doesn't display it. That is why you need the template helper, to get the data from the client's mini-mongo collection into the format the templates require.

You must subscribe() using the same name as used in the publish(). In your case (pay attention to 'items'):
/server:
Meteor.publish('items', function () {
return Items.find({});
});
/client:
if (Meteor.isClient) {
Meteor.subscribe('items');
}
The publish/subscribe link is telling meteor to send all docs in the 'Items' collection to minimongo on the client. Now, the purpose of the template helper is to tell meteor that you want to reactively update the template any time a document changes in Items.
A good reference on the subject: https://www.discovermeteor.com/blog/understanding-meteor-publications-and-subscriptions/

How do I structure a Timezone Checking App in Ember

As a way to learn Ember, I'm trying to build a simple app, now without the crutches of a tutorial.
The app will do the following --
User writes his own city
User writes the city of person he wants to meet
Function will spit back up all the times that are mutually good for eachother. I.e times where neither of them will have to wake up too early to stay too late)
I'm a bit confused as to how to structure the data the Ember way. How would I go about it?
I'm thinking --
There will be an index.handlebars
- This will have the 2 input fields for both person A and person B's cities
- This will be backed by the 'Meeting' Model(attributes : cityA, cityB)
When the submit button is clicked, this is where I get confused --
I can imagine that there is a model called MeetingTime (with personA's time, and personB's time).
In what way would I present that, following Ember's best practices? What routes, controllers, templates etc?
Currently, this is what I have ->
RightTime.Router.reopen({
location: 'history'
});
RightTime.Meeting = DS.Model.extend({
myCity: DS.attr('string'),
theirCity: DS.attr('string'),
meetingTimes: function() {
if (myCity && theirCity) {
// get back a collection of meeting times
}
return false;
}.property('myCity','theirCity')
});
RightTime.IndexRoute = Ember.Route.extend({
model: function() {
//return this.store.createRecord('meeting');
//the above return is giving the error 'unedfined is not a function'
}
});
#index.handlebars
<div class="container">
<div class="col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4">
<header class="animated fadeInDown">
<h1><span class="twenty-four-header">24</span>Time</h1>
<h3>Get Great Meeting Times Instantly</h3>
</header>
<section class="main-options animated fadeInDown">
<div class="form-group">
{{input value=myCity placeholder="What's your city?" class="form-control input-lg"}}
</div>
<div class="form-group">
{{input value=theirCity placeholder="What their city?" class="form-control input-lg"}}
</div>
<div class="form-group">
<button {{action 'getTimes'}} class="btn btn-lg get-times btn-block btn-primary">Get Times!</button>
</div>
</section>
</div>
</div>

Ended up making it! www.24time.co
The code can be found at www.github.com/stopachka/right-time
There's one model called Meeting.
A person chooses a city by interacting with the Places Autocomplete API. When they choose, it returns latLng positions, which are attached to the meeting. As soon as the model has both positions for the cities, it makes an ajax request to /api/meeting, sending the location parameters.
The API returns back all the best times. I'm pretty sure I'm not doing it the ember way though, perhaps the model can be broken down differently, and the times can be models themselves.