Skip to content

Instantly share code, notes, and snippets.

@jberger

jberger/test.pl

Created February 28, 2017 22:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jberger/1a53a665d36e6c94864761fd205f2ad3 to your computer and use it in GitHub Desktop.
Save jberger/1a53a665d36e6c94864761fd205f2ad3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
test.pl
use Mojolicious::Lite;
get '/jquery';
get '/vue';
get '/data' => sub {
my $c = shift;
$c->delay(
sub { Mojo::IOLoop->timer(5 => shift->begin) },
sub { $c->render(text => 'expensive value') },
);
};
app->start;
__DATA__
@@ jquery.html.ep
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="output">Placeholder ...</div>
<script>
$(function() {
$.get('/data', function(data) {
$('#output').text(data);
})
});
</script>
</body>
</html>
@@ vue.html.ep
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.js"></script>
</head>
<body>
<div id="app">
<div id="output">{{ text }}</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
text: 'Placeholder ...',
},
mounted: function() {
var self = this;
$.get('/data', function(data) {
self.text = data;
});
},
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment