I have a Rails 3.2.8 application that I have recently upgraded from 3.1, and I have converted all of the original application.js code to CoffeeScript. Most of it is working fine. However, I have a breadcrumb function that I call in several views that is not being found. For right now, I'm just throwing up an alert to see if it is working:
product_breadcrumb = (attr) ->
alert attr
That's in a file called product_search.js.coffee. It is being successfully compiled, and ends up looking like this:
(function() {
var product_breadcrumb;
product_breadcrumb = function(attr) {
return alert(attr);
};
}).call(this);
I guess that's right, I don't know. Anyway, in Firebug I'm getting:
ReferenceError: product_breadcrumb is not defined
Please note that this is after an Ajax call. I don't know why the function wouldn't be available though. It's just a function definition after all. Shouldn't it still be available to the rendered HTML from the Ajax call? I can't understand why the function can't be found.
This needs to be on the global scope, and then you need to call it that way.
You should write:
root = exports ? this
and name your function
root.product_breadcrumb
then you can call it elsewhere as expected.
See this answer for a much lengthier explanation.
Related
I am currently working on a simple app to store workout routines in Nuxt 3 and Appwrite. The link to the source code is here.
After logging in and adding in some workouts in the app's UI, whenever I try to call the deleteWorkout function, I get an error in the console saying that the function is not defined, whereas I have clearly defined in the workoutStore. I can't seem to figure out the reason for the same.
The same can be seen in the given screenshot.
Console on clicking the delete button
PS:
Most probably the error should be originating from either /pages/workouts.vue, /components/WorkoutDetails.vue or /stores/workout.js.
I am using Appwrite to manage the back-end of the web app, and the instructions to setup the same can be found in the README.md. (Though I don't think the error I am facing is related to the same.)
In your code the problem is, you declear your deleteWorkout() function outside of the actions block in workout.js file.
Make sure all your functions in the workout store are inside the actions block. Then it will be accessable from the vue component
Im following the tutorial here...
https://vue-tutorial.meteor.com/simple-todos/
But I get an error even just when installing the default vue meteor app.
meteor: {
$subscribe: {
'experiments': [],
},
experiments () {
return Experiments.find({}).fetch();
},
},
gives me an error
TypeError: Cannot read properties of undefined (reading 'find')"
If I console log Experiments, its there and I get the Meteor collection object. Any idea why this might be occuring??
import Experiments from '../../api/collections/Experiments'
console.log(Experiments)
Gives me
So its obviously an available object.
Just the find({}).fetch() method on it doesnt seem to be available??
UPDATE:
THE ANSWER BELOW WORKED (kind of)
experiments() {
let experimentsData = Experiments.find({}).fetch();
if (this.$subReady.experiments) {
console.log(experimentsData);
return experimentsData;
}
},
This now returns the experiments in the console log. So they are available. However rendering them to the template doesnt.
<h2>Experiments</h2>
<div v-for="exp in experiments" :key="exp.id">
{{exp.name}}
</div>
Any idea why??
Does it have to be put into a vue data object? Computed??
I thought the meteor:{} object acted kinda like computed, but it appears not??
How do I get the data onto the screen??
The answer is actually not correct.
I am experiencing the same issue from an out of the box meteor vue app created with: meteor create vanillaVueMeteor --vue
The error occurs if you define ANY function in the meteor: section of the default export (and bizarrely the first function defined is always being called regardless of whether it is actually referenced anywhere). This is obviously a bug either in the meteor vue creator or some combination of the default versions of meteor and vue libraries.
Additionally with respect to providing data to your template: you should not call fetch, just pass the result of the find which then means you won't need to wait for the subs to be ready because reactivity will update the view when the data is available. Obviously the underlying issue is preventing this all from working correctly.
UPDATE:
It seems to be an issue with 2.7.x Downgrading to the latest 2.6 worked for me:
meteor npm remove vue
meteor npm i vue#2.6 --save
It looks like you need to just use this.$subReady in your 'experiments` function to handle the timing of how the data comes in over DDP in Meteor.
I use something like this in all my subscriptions.
When the subscription starts up, the data won't be delivered from the publication the very 1st time, so that is what causes your undefined error that you are getting.
I love the Vue + Meteor combo. You can also come join the community Slack or Forum if you have questions, there are a bunch of us to help you there.
Happy Coding!
Bob
experiments () {
let experimentsData = Experiments.find({}).fetch();
if(this.$subReady.experiments){
return experimentsData;
}
},
This should resolve your issue in the UI. The HTML data will load and run before all the data from Meteor is ready, so you just use something like this:
<h2>Experiments</h2>
<div v-if="subReady.experiments" v-for="exp in experiments" :key="exp.id">
{{exp.name}}
</div>
I am using jasmine to test my front end, and have a spy set up to watch for the edit function to be called within a controller. The callback takes a message and either brings up the edit view or throws an error.
spyOn(edit, "edit").andCallFake (callback) ->
console.log(callback)
callback()
I also have a spy setup to watch for a function in the model that fetches an updated version of the item within the edit controller.
spyOn(ag, "fetchLatestVersion").andCallFake (callback) ->
console.log(callback)
callback()
This function returns a message that gets sent to the edit callback and then displays the view or throws an error.
My edit function is running correctly until it gets to the fetchLatestVersion() function and then it doesn't seem to want to run the callback and doesn't even seem to output what the callback is. Any help with jasmine's .andCallFake() would be much appreciated.
Thanks in advance!
EDIT:
I just removed the edit spy (ended up being unnecessary) and my error has since changed. I am receiving the correct callback function from .fetchLatestVersion(), but I end up getting an error saying:
Error: Expected a spy, but got Function.
Let me know if you need more information. Thanks again!
This turned out to be an issue with Spine (the frontend framework) and how it finds objects. It makes a clone rather than returning the actual object. By changing the records to irecords I was able to get the test to pass correctly!
I just installed the recently released Intellij IDEA 12, which is GREAT for Play Framework 2.
However, I'm having the following issue: in an HTML Scala template, any JavaScript code enclosed in a <script> tag within the body of the template is not recognised as JavaScript by IDEA, thus not offering code completion and incorrectly showing errors where they aren't. I suspect it is interpreting the code as Scala code, ergo offering incorrect code completion and making it quite painful to write JS in a template.
This issue was not present in IDEA 11.
Any ideas?
Update
I have the JavaScript Support plugin enabled. Simple code completion works fine. However, if I type function (){} to code an anonymous function and hit Enter with the caret between the curly brackets, IDEA does the following:
If I manually fix the incorrectly added }, and write code for the anonymous function, it offers correct variable suggestion for the console.log although it is stil showing errors:
I can't confirm that, I can see that both, Scala and JavaScript completion works properly.
Go to Settings > Plugins and make sure that you have JavaScript Support enabled. After that close and reopen all your views to let the Idea analize syntax once again.
It appears that your function statement is invalid because you did not name your function. The details of what is going on here are answered in this post. I'm not sure of the details of your particular needs, but you might try this syntax instead:
<script>
(function() {
})();
</script>
I'm currently working on an Extension for Safari 5 and I want to run a listener function whenever Settings changes are made. Apple provides an example for that, but it doesn't work for me. I currently have this listener function in my global html file:
function numberChanged()
{
if(event.key == "number")
alert("Number has changed!");
}
safari.self.addEventListener("change", numberChanged, false);
I hope somebody can help me. Does somebody know what I'm doing wrong?
I believe that you need to include ‘event’ as a parameter in your function so it looks like this:
function numberChanged(event)
{
if(event.key == "number")
alert("Number has changed!");
}
however, that said, it’s not working properly for me either (with or without the param), so I might be wrong. Interestingly, every time I change a field or click a button on this stackoverflow form, my alert (similar to yours) IS firing, even though I did not change my setting. totally weird.
update: I got it working, finally. The example that apple provides is just wrong. So there are two parts to the answer. I gave the first part above — you do need to add ‘event’ as a parameter to your function. the second part is that the addeventlistener has to be done on the settings object and not, as apple shows you, using ‘self’ from the global.html page. so the working call would look like this for you:
safari.extension.settings.addEventListener("change",numberChanged,false);