I'm following this tutorial to learn Meteor. After adding the first JS code, I'm getting [object Object] on my browser. I've followed everything as explained (except for some names that I have changed, but I haven't used any reserved words), but I cannot see anything else. This part is in the first 4 minutes. This is how my files look:
demonstration.js:
CalEvents = new Meteor.Collection('calevents');
Session.setDefault('editing_calevent', null);
Session.setDefault('showEditEvent', false);
Meteor.Router.add({
'/':'home',
'/calendar':'calendar'
})
calendar.html:
<template name="calendar">
<div id="calendar">
Hello world! Now at calendar.
</div>
</template>
home.html:
<template name="home">
<div class="hero-unit">
<p>Manage your calendar</p>
<p><a class="btn btn-primary btn-large">Learn more</a></p>
</div>
</template>
demonstration.html:
<head>
<title>Calendar app</title>
</head>
<body>
{{>menu}}
<div class="container-fluid">
<div class="row-fluid">
{{renderPage}}
</div>
</div>
</body>
I suspect it has something to do with the Meteor.Router.add() line, because the little I did prior to adding this worked. I have tried changing the page to show on '/' to other pages that contained a simple text, but it didn't work.
Edit to add: I am working thru Nitrous.io and I installed Meteorite prior to adding the router package.
Thanks in advance.
PS: I have searched in here and on Google but I haven't been able to find any answer to this question. If there is one, kindly point me to the right address.
Lots of examples that use Meteor prior to version 0.8 will not work, so make sure you check out a recently updated example, like those on Discover Meteor.
In this case, router has been fixed to support Meteor 0.8 and your example will work by replacing {{renderPage}} with {{> renderPage}}. However, the rest of the example probably won't work, and as others have mentioned, router has been deprecated for Iron Router.
Related
I have a small vueJS app started. It's just a .html file and a .js file. Inside the HTML, I'm linking to the JS file to get my Vue components. Everything about the component seems to be in working order as far as I can tell: I literally copied the form of another component which I copied from a tutorial. So it should work, but it doesn't, or at least I can't tell why it shouldn't work.
Here is my code. The HTML:
// this is in main_step09.js
Vue.component('headline-roly', {
props: ['title', 'body', 'date'],
template: `
<div>
<h1>Today's Headline: {{ title }}</h1>
<p>{{ body }}</p>
<h6>Reported on: {{ date }}</h6>
</div>
`
});
new Vue({ el: '#root' })
<!-- actually in <head> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.css">
<div id="root" class="container">
<headline-roly title="In The News" body="lorem ipsum" date="10/16/2019"></headline-roly>
<headline-roly title="This Just In" body="CTV News reporting" date="12/20/2019"></headline-roly>
<headline-roly title="Spider-Man!" body="The daily bugle" date="01/16/3019"></headline-roly>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<!-- this is where main_step09.js is included in the actual code
<script src='main_step09.js'>
</script>
-->
I don't see what I'm doing wrong. It even works in a JS Fiddle: https://jsfiddle.net/j15x32fp/
But in the browser I get the error:
"[Vue warn]: Unknown custom element: <headline-roly> - did you register the component correctly? For recursive components, make sure to provide the "name" option."
Anyone help?
Your script doesn't know what a headline-roly is because you commented out the <script> tag for main_step09.js, where headline-roly is defined.
Hey all: The solution ended up being a little strange. I restarted my computer, reinstalled my Windows 10 OS, and found that main_step09.js was ... oh.
I had the code for the Vue component sitting in the wrong file. There was a duplicate titled "main_step09-testing.js" where I had the code written.
Stupid. Oh well
I need to integrate facebook plugin into my vuejs application. I wanted to use
vue-facebook-login-component plugin but I am confused at some points. I can not change text, it doesnt have a text prop, instead it has a text slot. And their slot example doesnt have a api-id which needed for facebook login.
They have to slot example but I could not understand how to use it, never used slot before. I searched google but still can not make it.
When I used in my code, slot-scope="scope" gives scope is defined but never used error, so my first question is how will I use it ?
Another issues is, in slot example it doesnt have app-id, I confused where to put id when I use slot, and how to get login-logout information.
this one works but I can not change login/logoutworking texts.
<v-facebook-login app-id="966242223397117"></v-facebook-login>
this is the example with slot given on the plugin page
<template>
<v-facebook-login-scope>
<button slot-scope="scope">
<!-- Compose HTML/CSS here, otherwise nothing will be rendered! -->
</button>
</v-facebook-login-scope>
</template>
and this is my original button code where I want to integare facebook login. How will I use his code in above code-with-slot ? and where will I put app-id ? Here it is a more detailed code with slot from the plugin and it doesnt have api-id either.
https://github.com/adi518/vue-facebook-login-component/blob/master/src/components/FBLogin.vue
<v-button
class="gray fw shadow-none login-box__submit"
title="FACEBOOK İLE GİRİŞ YAP"
/>
so what I tried is directly putting my button inside of it (just giving class doesnt work)
This brings button with my button class but stays connecting and never bring login
<template>
<v-facebook-login-scope>
<button slot-scope="scope">
<!-- Compose HTML/CSS here, otherwise nothing will be rendered! -->
<v-button
class="gray fw shadow-none login-box__submit"
title="FACEBOOK İLE GİRİŞ YAP"
/>
</button>
</v-facebook-login-scope>
</template>
Try this
<v-facebook-login app-id="966242223397117">
<span slot="login">FACEBOOK İLE GİRİŞ YAP</span>
</v-facebook-login>
Maybe its just the fact that I'm not used to using them, but it's hard for me to read and debug templates. I’m trying to figure out if there is a way to use JSX outside of render method or a good linter that would look inside the templates, but can't seem to find anything.
example of the simple issue where closing tag of is missing inside a template:
template:
<div id="movie-filter">
<h2>Filter results</h2>
<div class="filter-group">
<check-filter
v-for="ganre in ganres"
v-bind:title="ganre"
v-on:check-filter="checkFilter"
<!-- forgot to close the tag with ">" -->
</check-filter>
</div>
</div>
Thanks, any recomendations apreciated!
I have a D3 donut that tweens so i require that the svg be preserved. I find the #constant region works like a charm until i try and use a #each block around it to make more than one donut:
As simply as possible (donuts here returning single item)
{{#with donuts}}
<div id="donut-container-{{emoticonName}}" class="donut-container">
{{#constant}}
<img id="img-{{emoticonName}}" src="/images/emoticons/{{emoticonName}}.png" class="emoticon">
<svg id="svg-{{emoticonName}}" class="svg-donut"></svg>
{{/constant}}
</div>
{{/with}}
This works like a charm - tween behaves as svg is not re-rendered.
As soon as i do this however (donuts here returning [] with single item inside):
{{#each donuts}}
<div id="donut-container-{{emoticonName}}" class="donut-container">
{{#constant}}
<img id="img-{{emoticonName}}" src="/images/emoticons/{{emoticonName}}.png" class="emoticon">
<svg id="svg-{{emoticonName}}" class="svg-donut"></svg>
{{/constant}}
</div>
{{/each}}
The constant region no longer functions and things re-render instead of being preserved. Note in both cases here i'm still only rendering a single donut to isolate the issue to the #each block.
Any help with this would be appreciated.
Thanks.
So sometimes just the act of posing a question in a form clear enough for others to understand, makes the answer jump out...
{{#constant}}
{{#each donuts}}
<div id="donut-container-{{emoticonName}}" class="donut-container">
<img id="img-{{emoticonName}}" src="/images/emoticons/{{emoticonName}}.png" class="emoticon">
<svg id="svg-{{emoticonName}}" class="svg-donut"></svg>
</div>
{{/each}}
{{/constant}}
Seems so obvious i'm almost embarrassed :D
Try removing the constant tags and run meteor with meteor --release template-engine-preview-5.5. This will allow you to use reactivity while still working with D3. Once Meteor UI is released (probably along with Meteor 1.0 in early 2014) you can run the app with just meteor again.
I'm trying implement a way to recursively template using jsRender. The issue is, my data object has a unary self-referencing heirarchy which requires recursive looping to show all of the attributes. The example here is a forum post which can contain any number of reply posts. Each reply post can contain any number of children posts and so on. I have the following code working except for the recursion part. I could only find one remote reference to this via the Googles, so here is what I have thus far:
<script id="forumPostsTemplate" type="text/x-jsrender">
<article class="forumPost">
<header class="forumPostHeader">{{:PostSubject}}
<div class="info">By: Some Person, {{:CreatedDate}} Flag as innapropriate </div>
</header>
<div class="content">
{{:PostContent}}
{{for Replies}}
{{:Replies tmpl="#forumPostsTemplate"}}
{{/for}}
</div>
</article>
</script>
Does anyone have any experience with this sort of functionality? I am currently running the most recent version of jsRender if that helps.
Per this example for jsRender, does it work to call your template like this instead?
https://github.com/BorisMoore/jsrender/blob/master/demos/step-by-step/06_template-composition.html
{{for Replies tmpl="#forumPostsTemplate"/}}
These three different versions of a tree tag control illustrate exactly that kind of recursion:
http://www.jsviews.com/#samples/tag-controls/tree