diff --git a/build/components.html b/build/components.html index 3144cfa..382f511 100644 --- a/build/components.html +++ b/build/components.html @@ -1,2 +1,16 @@ - \ No newline at end of file diff --git a/build/index.html b/build/index.html index 7bfda9f..71de7fe 100644 --- a/build/index.html +++ b/build/index.html @@ -4,14 +4,36 @@ RCard + + + + + + + + - -
+
diff --git a/build/index.js b/build/index.js index 509c5d8..982d86c 100644 --- a/build/index.js +++ b/build/index.js @@ -1,11 +1,23 @@ -(function(Ractive){ +$(document).ready(function(){ - Ractive.components.home = Ractive.extend({ + Ractive.components.home = Ractive.extend({ template:'#home' }); + $.getJSON('/sample', function(res){ + + var ractive = new Ractive.components.home({ + el:'#load', + data:res + }); + + }); + //Code below here -})(Ractive); + + + + }); diff --git a/client/components/home/home.html b/client/components/home/home.html index 8b13789..f3ab6ca 100644 --- a/client/components/home/home.html +++ b/client/components/home/home.html @@ -1 +1,15 @@ - +
+
+
+
+ {{studentName}} - {{age}} +

I am a very simple card. I am good at containing small bits of information. + I am convenient because I require little markup to use effectively.

+
+
+ This is a link + This is a link +
+
+
+
diff --git a/client/index.html b/client/index.html index 9b90221..d484511 100644 --- a/client/index.html +++ b/client/index.html @@ -4,13 +4,21 @@ RCard + + + + + + + + @@include('components.html') -
+
diff --git a/client/index.js b/client/index.js index ebbba16..5261092 100644 --- a/client/index.js +++ b/client/index.js @@ -1,8 +1,20 @@ -(function(Ractive){ +$(document).ready(function(){ - @@include('components.js') + @@include('components.js') + + $.getJSON('/sample', function(res){ + + var ractive = new Ractive.components.home({ + el:'#load', + data:res + }); + + }); //Code below here -})(Ractive); + + + + }); diff --git a/gulpfile.js b/gulpfile.js index d71b486..04041bb 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -34,7 +34,7 @@ gulp.task('componentJS', function(){ gulp.task('componentHTML', function(){ return gulp.src(paths.componentHTML).pipe( insert.transform(function(contents, file) { - return ''; + return ''; })).pipe(concat('components.html')) .pipe(gulp.dest('./build')); }); diff --git a/server/app.js b/server/app.js new file mode 100644 index 0000000..a14e571 --- /dev/null +++ b/server/app.js @@ -0,0 +1,18 @@ +var fs = require('fs'); +var express = require('express'); +var app = express(); +app.use(express.static('../build')) + +app.get('/', function(req, res){ + res.send(fs.readFileSync('../build/index.html')); +}); + +app.get('/sample', function(req, res){ + res.send({ + studentName:'Jonnie', + age:13 + }); +}); + + +app.listen(1337);