How to make Laravel/Vue implementation show individual entry - javascript

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>

Related

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 it work: Dragula drag-and-drop on Meteor

I've been trying to add a drag-and-drop functionality into my Meteor app using the Dragula library. It seems very simple and easy to use. However, even though I have followed the instructions and looked other examples from the web, I haven't been able to get it work. It doesn't generate any actual errors, but the <div> elements that I want to move just can't be moved.
JS:
import { Template } from 'meteor/templating';
import './body.html';
if (Meteor.isClient) {
Meteor.startup( function() {
Session.set("view", "titleScreen");
});
Template.body.helpers({
template_name: function () {
return Session.get("view");
}
});
//click event to change view from title screen to main screen
Template.body.events({
'click .changeScreen': function (e) {
e.preventDefault();
Session.set("view", "mainScreen");
var selectedView = Session.get('view');
console.log(selectedView);
}
});
//drag and drop the contents of divs 'move1' and 'goal1'?
Template.body.onRendered(function() {
dragula([document.getElementById('move1'), document.getElementById('goal1')]);
});
}
HTML:
<body>
{{> Template.dynamic template=template_name}}
</body>
<template name="plcHolder">
{{view}}
{{#if view "title"}}
{{> titleScreen}}
{{else}}
{{> mainScreen}}
{{/if}}
</template>
<template name="titleScreen">
<!--here would be the contents of the title screen, like some text and a button-->
</template>
<template name="mainScreen">
<div class="container">
<div id="goal1" class="goalBoxBG">
<div class="goalBox"></div></div>
<!--...-->
<div id="move1" class="moveBoxBGL">
<div class="moveBox"></div></div>
<!--...-->
</div>
</template>
This is my first Meteor app, so I decided to use the same structure used by Meteor's tutorial, i.e. the JS and HTML files referenced above are placed in ../imports/ui/ and imported from there. I installed Dragula with npm and the dragula.js file is located in \node_modules\dragula.
EDIT: I was able to make it work by moving the code to the end of the HTML file, so the main reason must've been with the order in which the code is executed. It seems that onRendered() fires after the page has initially loaded and doesn't take account the templates, which are changed by JavaScript.
The import statement shouldn't reference the node modules directory. See
https://guide.meteor.com/using-npm-packages.html#client-npm for details, basically you should just write
import dragula from 'dragula';
And the packaging system will work out where to find it for you.
There is/was a package on Atmosphere:
https://atmospherejs.com/ahref/dragula
Which does the work of importing for you, but the author recommends using npm as the way forward.

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/

Create sub controller without route in Ember.js

I'm building a chat app with ember.js(I'm very new to it) that has the following specifics:
Every user have multiple threads each one with only two users involved
I need to display the thread and the messages in a "facebook" manner with the list of threads aside and the messages right of it
Every message have a read state that I need to work with
The app works with an url pattern like /:thread_id
Giving theese, I've already setted up an app
https://gist.github.com/Fed03/33da4a7c28c792af23cf (I've merged the various js file for sake of your readability) but the problem rises on the specific message state.
From what I understand about ember, evrything "needs" a route in order to proxy things, but if you look at the code and at the specifics a don't need a message route but I'd need a MessageController to manage the single message states.
Obviously I'm doing something very wrong with the architecture of this app, so if someone cuold give me some advices would be great!
Thank you in advance!
You'll want to use a {{render}} helper.
Instead of rendering each model in the threads template, pass the model to a {{render}} and have it handle displaying the message and it'll have it's own controller.
You'll need to create a seperate template for the msg, like this:
<script type="text/x-handlebars" data-template-name="message">
<div class="col-md-12">
<div class="well">
<div class="message-header">
<h5>{{user.fullname}}</h5>
</div>
{{body}}
{{isRead msg}}
</div>
</div>
</script>
And then change your thread template to this:
<script type="text/x-handlebars" data-template-name="thread">
{{#each msg in model.messages}}
{{render 'message' msg}}
{{/each}}
<div class="col-md-12">
<div class="row">
<div class="col-md-5">
{{textarea value=message rows="3" class="form-control" data-thread=model}}
<div>
<button class="btn btn-primary pull-right" {{action 'send' model}}>
Submit
</button>
</div>
</div>
</div>
</div>
</script>
Then each msg will have it's own instance of MessageController and you can use it to handle it's state.

Categories