Im using vue fire as a plugin for connecting to firebase easily integrated with VUE JS and VUE router
im really having a hard time solving the null thing after manually binding
like this
line of code
bindUser() {
this.$bindAsArray('buser',this.$firebaseRefs.busers.orderByChild('uid').equalTo(this.uid));
},
and route correctly
using this
toDashboard() {
this.$router.push(`user/${this.buser[0].username}`)
},
why is it always a null? please help me here
Do you need to manually $bindAsArray? Have you tried this on your component options?
firebase() {
debugger // make sure $this.$firebaseRefs.busers... is what you expect
return {
buser: this.$firebaseRefs.busers.orderByChild('uid').equalTo(this.uid)
}
}
Also are you using Vue DevTools? That should help you inspect your bindings.
Related
I'm looking for a little guidance and suggestions here. My attempts and theories will be at the bottom.
I have a NextJS project from which I want to export the top level component (essentially the entry file) so that I can use it as a preview in my dashboard.
The nextjs project is very simple. For the sake of simplicity, let's imagine that all it renders is a colored <h1>Hello world</h1>. Then in my dashboard, I want to render a cellphone with my NextJS component embedded and then from the dashboard change the color of the text, as a way to preview how it would look like. I hope this makes sense.
I'm lost at how I could export this component from NextJS and import it into my dashboard. The dashboard is rendered in Ruby on Rails. It would be simple enough to just import the repo from git and access the file directly form node_modules, but I'm looking for a solution that doesn't require installing npm on our Rails project.
Paths I have thought about:
1 - Install npm on Rails and just import the source code from NextJS repo and access the file and render with react (Simple, but we're looking for a non-npm solution)
2 - Bundle the component with webpack and load it directly into rails (does this even work?) - I exported the js and all it did was freeze everything :P Still trying this path for now
3 - Using an iframe and just accessing the page (then I can't pass any callbacks into the iframe to change the color directly from the dashboard)
4 - I cannot separate this component from NextJS to use as a library in both repos. The component we are exporting is the "ENTIRE" NextJS app jsx and it wouldn't make sense to separate in a different repo
Does anyone have a suggestion on how I could achieve this?
I think you could use an iframe with the nextjs app url. Then if you want to change the color, simply add the color in query parameter of the iframe and handle it on nextjs app.
Simple example
Rails view (erb)
<iframe src="#{#nextjs_url}?color=#{#color}" />
NextJS
# do something to get the query param of the page and and set to prop of the component
const YourComponent = ({color}) => {
return <h1 style={{color}}>Lorem</h1>;
}
While trying Hoang's solution, I decided to dive deeper into how to communicate with an iframe and the solution actually feels quite good.
You can set up listeners on either side and post messages in between the projects.
So in my dashboard:
function handleEvent(e) {
const data = JSON.parse(e.data)
if (data.type === "card_click") {
//if type is what we want from this event, handle it
}
}
// Setup a listener with a handler
// This will run every time a message is posted from my app
window.addEventListener("message", handleEvent, false)
const postMessage = (color) => {
const event = JSON.stringify({
type: "color_update",
color,
})
// Find the iframe and post a message to it
// This will be picked up by the listener on the other side
document.getElementById("my-iframe-id").contentWindow.postMessage(event, "*")
}
And on my app:
function handleEvent(e) {
const data = JSON.parse(e.data)
if (data.type === "color_update") {
// Do whatever is necessary with the data
}
}
// Setup listener
// This will fire with every message posted from my dashboard
window.addEventListener("message", handleEvent, false)
const handleCardClick = (cardIndex) => {
const event = JSON.stringify({
type: "card_click",
cardIndex,
})
// post message to parent, that will be picked up by listener
// on the other side
window.parent.postMessage(event, "*")
}
It feels pretty straight forward to communicate with an iframe with this solution.
after several rounds of research, I found there is no clear answer about the situation like below:
I have a js file called 'AAA.js', and there is simple code in side like this:
var AAA = {
listenForMenuLayer: function () {
console.log("menu initiated");
$('.nav-menu').on('click', function() { console.log("menu clicked")});
}
init: function(){
this.listenForMenuLayer();
}
};
And in the dart, I wrote like below (using 'dart:js'):
js.context['AAA'].callMethod('init');
Then, when I run it, everything looks fine, the "menu initiated" shows properly, which means the 'listenForMenuLayer' is initiated, but when click on the '.nav-menu', there is nothing happened. (I check many times, there is no spelling error or else)
My question is: Can Dart accept this kind of initiating of external JS event? or we should re-write those JS events at all, please advise, many thanks.
Updates:
I found that if we write the js code like above, the jquery will not be initiated properly, which means all the features begin with '$' will not be functional.
guys, I update it to using 'package:js/js.dart';
#JS('AAA.init')
external void aInit();
then some where, just simply call after including:
aInit();
I know that my question is not new, but all solutions I've found here and in the Internet are not working :( Or, I'm doing something completely wrong.
I need to create a communication between Dart and JS, and I would love to use events, as the idea seems to be neat and simple.
So, I tried this tutorial: https://dart.academy/easy-dart-js-interopt/
My JS code:
var customEvent = new CustomEvent("fromJavascriptToDart");
window.onload = document.dispatchEvent(customEvent);
document.addEventListener("fromJavascriptToDart", test, false);
function test() {
console.log("Listening");
}
The event is dispatched, as I see Listening in console log.
But when it comes to dart, nothing is working.
I've tried the following methods and everything failed:
document.on['fromJavascriptToDart'].listen((CustomEvent event) {
print("HEY! I'M LISTENING!");
});
window.on["fromJavascriptToDart"].listen((e) => print( "HEY! I'M LISTENING!"));
window.on['foo'].add((e) => print(e.detail)); //This is not working, as there is no add method in Stream Event anymore
#Listen('fromJavascriptToDart')
void eventTest(){
print("HEY! I'M LISTENING!");
}
Any help is mostly appreciated.
DartPad example
document.on['fromJavascriptToDart'].listen((CustomEvent event) {
print("HEY! I'M LISTENING!");
});
Works fine.
#Listen() is Polymer specific
add doesn't exist (listen as show above should be used)
the event doesn't seem to reach window, but I'm sure this will behave the same in pure JS.
I'm using the twitter typeahead library. Version: 0.10.4
I have been able to bind events to the "opened", "selected" events but nothing happens when I bind the event "rendered", although it is in the documentation.
Has any of you guys come across this issue?
Here is the code I'm using:
typeAhead.on('typeahead:selected', function(e, suggestion) {
alert(0);return; // Shows the alert
})
typeAhead.on('typeahead:rendered', function() {
// Nothing happens
});
had the same issue, debugging I've found out this line
typeAhead.data().ttTypeahead.dropdown.datasets[0].onSync('rendered', function(){
console.log('rendered');
});
it's working for me and I aint found any better than this, without modifying typeahead libraries.
if you have more datasets, just change to a for loop.
I'm having troubles with this event too. I'm using version 0.11.1 and as far as I can see I think there's a kind of bug when passing arguments to the callback function:
if you use this handler:
function(obj, matches) {
console.log(matches);
}
you seem to get only one (the first one, of the several matched suggestions.
if you use this handler:
function(obj, match1, match2) {
console.log(match1);
console.log(match2);
}
you get two, and so on.
Actually all suggestions are passed as this handler prove:
function() {
console.log(arguments);
}
skipping the first slot, the remaining are the current suggestions, so I think this is a bug of the plugin.
I am trying to require momentjs in my web application. I am using ASP.NET MVC on the server-side, and Durandal on the client-side.
requirejs.config({
urlArgs: "bust=" + (new Date()).getTime(),
paths: {
'text': '../Scripts/text',
'durandal': '../Scripts/durandal',
'plugins': '../Scripts/durandal/plugins',
'transitions': '../Scripts/durandal/transitions',
'moment': '../Scripts/moment'
},
noGlobal: true
});
and then here is my define function
define(['moment'], function(moment) {
moment().format();
});
I am working directly off of the Moment.js Docs
I can see that the moment.js script is loaded but once it gets through the define function the application is just sitting there. If I take the define out everything works fine.
Can someone please help me figure out what I am doing incorrectly here?
I am adding a fiddle of my entire main.js file maybe that will help.
I think that I might have been misunderstanding a concept with require.js. I changed my main.js file to NOT have a the define that returns moment and instead just added a new modules that lookes like this..
define(['moment'], function() {
return {
dates: {
getSimpleDate: getSimpleDate,
getDateTime: getDateTime
}
};
function getSimpleDate (date) {
return moment(date).format('DD-MMM-YYYY');;
};
function getDateTime(date) {
return moment(date).format('DD-MMM-YYYY H:mm:ss a');
}
});
That seems to be working out just fine.