I wrote a component like this one:
<template>
<div>{{ myData }}</div>
</template>
<script setup>
const myData = ref('')
const myFunction = () => {
console.log('test function')
}
</script>
In the devtools console, how to access myData or myFunction with $vm?
By dint of searching, I found!
$vm.setupState expose data and methods.
Related
I have a simple Meteor app just the basic meteor create test. I want to be able to route traffic to the "/" directory to a template.
I want to be able to route data from a facebook web-hook to a simple js response.
My issue is that when I fire the web-hook URL using postman it returns HTML and not my response.
I've tried many different options for other posts I have read but now have the most basic version to just get it working.
Here is the code I've used
main.html
<head>
<title>test</title>
</head>
<body>
</body>
<template name="home">
<form class="new-message">
<input type="text" name="message" placeholder="Testing">
</form>
</template>
main.js:
import { Meteor } from 'meteor/meteor';
import { Router } from 'meteor/iron:router';
import { Template } from 'meteor/templating';
import './main.html';
Router.route('/', function () {
this.render('home');
});
Router.route('/webhooks/facebook', function() {
var request = this.request;
var response = this.response;
response.end('webhook was called');
}, {
where: 'server'
});
All other files are exactly how they are created with meteor create.
I'm on Meteor version 1.8.1
I'm using postman to test the web-hook this is the created GET URL:
https://------.ngrok.io/webhooks/facebook?hub.verify_token=mytoken&hub.challenge=1234567&hub.mode=subscribe
code omitted to keep ngrok from getting slammed.
This is the response I'm getting:
<html>
<head>
<link rel="stylesheet" type="text/css" class="__meteor-css__"
href="/merged-stylesheets.css?hash=6b1f9f6fb78291ae58da8ec4f36476931155453c">
<title>simplechat</title>
</head>
<body>
<script type="text/javascript">
__meteor_runtime_config__ = JSON.parse(decodeURIComponent("%7B%22meteorRelease%22%3A%22METEOR%401.8.1%22%2C%22meteorEnv%22%3A%7B%22NODE_ENV%22%3A%22development%22%2C%22TEST_METADATA%22%3A%22%7B%7D%22%7D%2C%22PUBLIC_SETTINGS%22%3A%7B%7D%2C%22ROOT_URL%22%3A%22http%3A%2F%2Flocalhost%3A3000%2F%22%2C%22ROOT_URL_PATH_PREFIX%22%3A%22%22%2C%22autoupdate%22%3A%7B%22versions%22%3A%7B%22web.browser%22%3A%7B%22version%22%3A%22b22f1ad86c0a904c992885256b7de72ed2863e1d%22%2C%22versionRefreshable%22%3A%22a580e09175421ec6994fc6da61a0413f3a15d2b1%22%2C%22versionNonRefreshable%22%3A%22fc4ded0006de942fe57524f94d500abeb4569d6f%22%7D%2C%22web.browser.legacy%22%3A%7B%22version%22%3A%222571a76ffc344fbc5b40ade303255cbbc59e2682%22%2C%22versionRefreshable%22%3A%22a580e09175421ec6994fc6da61a0413f3a15d2b1%22%2C%22versionNonRefreshable%22%3A%22dc1e886b7786e303655c010220e9f502e82dcf1c%22%7D%7D%2C%22autoupdateVersion%22%3Anull%2C%22autoupdateVersionRefreshable%22%3Anull%2C%22autoupdateVersionCordova%22%3Anull%2C%22appId%22%3A%22zqskgg1xifoj.hlnqbjmcma6f%22%7D%2C%22appId%22%3A%22zqskgg1xifoj.hlnqbjmcma6f%22%2C%22isModern%22%3Afalse%7D"))
</script>
<script type="text/javascript" src="/packages/meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d"></script>
<script type="text/javascript" src="/packages/meteor-base.js?hash=29010b127daf4ebacaaf9db9b8a61487e57d7d86">
</script>
<script type="text/javascript" src="/packages/mobile-experience.js?hash=2751f9ec11102d1106042c462b340c3fcfcb1990">
</script>
<script type="text/javascript" src="/packages/modules-runtime.js?hash=d3c3e5d67c95f97a60888bda7373292efad3be5e">
</script>
<script type="text/javascript" src="/packages/modules.js?hash=e8b7455d5562fec1444a3c6882cdc6639055cfca"></script>
<script type="text/javascript" src="/packages/modern-browsers.js?
<script type="text/javascript" src="/packages/autoupdate.js?hash=6d56c0f3a885390c688b4f3f893d96d1280fd0ee"></script>
---- Cut out all of the other script calls to keep this short -----
<script type="text/javascript" src="/app/global-imports.js?hash=1f8a1ae2e343994912f72f1dc6eec1ca7df24cae"></script>
<script type="text/javascript" src="/app/app.js?hash=70cfa37cd2f85e533f69d7312d02ef8984eae01a"></script>
</body>
</html>
So basically it returns HTML.
I'm sure I'm missing something simple.
Thanks in advance for you help. Usually I wait till I have exhausted all other options before posting here. And I'm sure I have tried every other example given here on StackOverflow.
My desired result is simple to just return a HTTP response "webhook was called" instead of the HTML garbage.
You could use somethings like this :
Router.map(function(){
this.route("routeName", {path: "/url/:param1/:optionalParam?,
where: "server",
action: function(){
var param = this.params.param1;
this.response.writeHead(200, {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*'
});
//authenticate call and decrypt body
if (this.request.method == 'POST') {
//do something
}
if (this.request.method == 'GET') {
//do something
}
}
});
this.route("abc", {path: "/api/get/user/activity/:temp1",
where: "server",
action: function(){
//proceed as above
}
});
});
For help, read through https://iron-meteor.github.io/iron-router/#server-routing
The router file should be saved inside the server folder (for server-side routes)
Haven't used iron route in a long time but from what I remember you want to change your server side route to the following as it is for restful routes.
Router.route('/webhooks/facebook', { where: 'server' })
.get(function () {
// GET
})
.post(function () {
// POST
})
.put(function () {
// PUT
})
For others who have been struggling getting both server and client routes to work on the same Meteor app here is the solution.
Iron routers newest version requires all server side routes to be on the server side and you must fire them from the startup.
All client routes are added on the client side and included in the main.js on the client side.
My simple test was this:
meteor create test
Then in clients/main.html replace the current code and add a simple template as follows:
<head>
<title>newroutetest</title>
</head>
<body>
</body>
<template name="home">
<h1>Home</h1>
</template>
Then in the client/main.js add your client routes as follows:
import { Template } from 'meteor/templating';
import './main.html';
Router.route('/', {
template: 'home'
});
Now we setup the server side route in the file server/main.js you add the route in the startup section as follows:
import { Meteor } from 'meteor/meteor';
Meteor.startup(() => {
Router.route('/webhook', function () {
var req = this.request;
var res = this.response;
res.end('hello from the server\n');
}, {where: 'server'});
});
That's It
I hope this helps others who have been struggling with this.
I am trying to kendo mvvm bind within a template. Template variables are working but none of the MVVM stuff is.
<div id="list"></div>
<script id="template" type="text/x-kendo-template">
<div>
<button data-bind="visible: alreadyAttending, click: onClick">
Your id is ${ID}
</button>
</div>
</script>
var data = [];
data[0] = { alreadyAttending: true, ID: 1, onClick: function() { alert("Click 1"); }};
data[1] = { alreadyAttending: false, ID: 2, onClick: function() { alert("Click 2"); }};
$("#list").kendoListView({
dataSource: data,
template: kendo.template($("#template").html())
});
Fiddle available here: https://jsfiddle.net/q99ufo3c/5/
You can see the buttons are replaced with values from the data array, but visibility and click events are not wired up. I'm not sure what I'm missing. Does anyone know if this is supported?
You need to define some data attribute to the div element so that Kendo can bind it correctly to your View Model.
data-role="listview" - defines a listview component;
data-template="yourtemplateid" - defines the template to be used;
data-bind="source: dataSource" - defines what is the data
source of the listview component;
In the Javascript you need to have a Model that represents your object that will be in the data source of the list view. I created one called vm and I have chosen to use the ObservableObject extend method because it is useful when you want to create an object with default values, such as the onClick method.
Please, take a look at the Snippet below.
(function() {
var vm = kendo.data.ObservableObject.extend({
init: function(values) {
var defaultValues = {
alreadyAttending: false,
ID: null
};
kendo.data.ObservableObject.fn.init.call(this, $.extend({}, defaultValues, values));
},
onClick: function() {
alert(this.get("ID"));
}
});
var source = [
new vm({
alreadyAttending: true,
ID: 1
}),
new vm({
alreadyAttending: false,
ID: 2
})
];
var mainViewModel = kendo.observable({
dataSource: source
});
kendo.bind($("#list"), mainViewModel);
})();
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js"></script>
</head>
<body>
<div id="list" data-role="listview" data-template="template" data-bind="source: dataSource"></div>
<script id="template" type="text/x-kendo-template">
<div>
<button data-bind="visible: alreadyAttending, click: onClick">
Your id is #:ID#
</button>
</div>
</script>
</body>
</html>
I'm using polymer starter kit.I have to make many API calls in different HTML pages and for each API call, I'm using "iron-ajax" in that for 'url' property I'm assigning REST API URL.
URL will be like "https://XXXXX.in/YY/YY/YY" ,Here base URL XXXXX is same for all API call and YY will change.So how can I store Base URL XXX in one configuration file and access that value in all the pages for all "iron-ajax"? where I should access Base URL, is it inside polymer's 'ready' function for all the pages?
OPTION 1
In Polymer you would store values as properties. If you have the base URL as a property on top of the node tree (in the first parent element), you can pass it on to any child element (and then they can pass it further down).
Your top element:
<link rel="import" href="./child-el.html">
<dom-module id="main-el">
<template>
<child-el base-url="[[baseUrl]]"></child-el>
</template>
</dom-module>
<script>
Polymer({
is: 'main-el',
properties: {
baseUrl: {
type: String,
value: 'https://XXXXX.in'
}
}
});
</script>
The child:
<dom-module id="child-el">
<template>
<iron-ajax url="[[baseUrl]]/YY/YY/YY"></iron-ajax>
</template>
</dom-module>
<script>
Polymer({
is: 'child-el',
properties: {
baseUrl: {
type: String
}
}
});
</script>
OPTION 2
You can put all ajax calls in one element that doesn't render anything on the screen and include that element anywhere you need.
<link rel="import" href="./api-handler.html">
<dom-module id="main-el">
<template>
<api-handler id="api-handler"></api-handler>
</template>
</dom-module>
<script>
Polymer({
is: 'main-el',
attached () {
this.$['api-handler'].makeRequest();
}
});
</script>
OPTION 3
Store the baseUrl property in a Polymer behavior and include that in your elements.
OPTION 4
You can attach the value to the globally accessible window object. Your config.html would look like:
<script>
(function (Config) {
Config.BASE_URL = 'https://XXXXX.in';
})(window.Config = window.Config || {});
</script>
Then you import that in your index.html:
<link rel="import" href="./config.html">
..and Config.BASE_URL will be available in all your elements.
I haven't used React in several months, and tonight I was trying to write jsx that is automatically compiled to jsx by babel according to these directions.
I have two files like this:
Parent.jsx
var Parent = React.createClass({
render: function() {
return (<Child></Child>);
}
});
and
Child.jsx
var Child= React.createClass({
render: function() {
return (<span>CHILD</span>);
}
});
I am using babel to monitor the files for changes and output new js files when needed, and it always renders the Child component as React.createElement("Child", null) instead of React.createElement(Child, null) like I expect.
I'm new to babel and node in general and can't find a way to get this jsx transform to work as I expect. Is there something I'm missing? I feel like this pattern used to work, but I've never tried it with anything like babel before.
It took me what felt like forever to figure this out, but it turns out you can just load all the files from the HTML and then nest them later on.
HTML:
<html lang="en">
<head>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script>
</head>
<body>
<div id="root"></div>
<div id="test"></div>
</body>
<script src="./Test3a.jsx" type="text/babel"></script>
<script src="./Test3b.jsx" type="text/babel"></script>
<script type="text/babel">
ReactDOM.render(<Ostrich />, document.getElementById("root"));
</script>
<script type="text/babel">
ReactDOM.render(<Monkey />, document.getElementById("test"));
</script>
Test3A.jsx:
window.Ostrich = function() {
return (
<div>
Ostriches
</div>
);
}
window.Monkey = function() {
return (
);
}
Test3A.jsx:
window.MoreMonkeys = function() {
return (
<div>
That's a lot of Monkeys.
</div>
);
}
This is for non-webpack "React JS", or more accurately Babel/JSX "without" ReactJS. It may not be a perfect solution, but hopefully it helps.
I'm trying to GET Rest data from a parse.com backend with Angularjs. I expect at least console log you can see in the code below to return something, but it returns nothing, and there are no error in the console.
Here is the code i'm trying:
Full Javascript code:
var todoApp = angular.module('todoApp', ['ngResource']);
todoApp.factory('todoFactory', function($resource) {
return $resource('https://api.parse.com/1/classes/Professional', {}, {
method: 'GET',
headers: { 'X-Parse-Application-Id':'xxx', 'X-Parse-REST-API-Key':'yyy'}
});
});
function TodoController($scope, $location, todoFactory) {
function loadTodos() {
$scope.items = todoFactory.query();
console.log(todoFactory.query()); //i expect this to log something at least
}
}
Full html code:
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title></title>
</head>
<body>
<div ng-controller="TodoController">
<ul>
<li ng-repeat="item in items"> {{item.firstName}} </li>
</ul>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-resource.min.js"></script>
Any clue on how to give life to this dead code ?
The problem is that you are not calling your function.
You have two options:
In your controller:
function TodoController($scope, $location, todoFactory) {
function loadTodos() {
$scope.items = todoFactory.query();
console.log(todoFactory.query());
}
// You declare the function, now you can use this
loadTodos();
}
But, in this way, the function isn't available in your view, because it isn't declared in the $scope. To that, you should declare like this:
function TodoController($scope, $location, todoFactory) {
$scope.loadTodos = function() {
$scope.items = todoFactory.query();
console.log(todoFactory.query());
}
}
You declare the function in $scope, now you can use in the view like this:
<button type="button" ng-click="loadTodos()">Get Items</button>