The rough-demo.html just shows whats needed to make the demo working.
The rest is the better structurized example:
demo.html - demo with less boilerplate.contribution-months.js - exports mockContributionMonthsService that expects mockServer and mocks Feathers service for contributionMonths;contribution-months.json - json data for can-fixture.store to be used for mocking Feathers service.| <div class='container'> | |
| <script type="text/stache" can-autorender id='main'> | |
| <h1>Demo</h1> | |
| <can-import from="bootstrap/dist/css/bootstrap.css" /> | |
| <can-import from="bitcentive/styles.less" /> | |
| <can-import from="bitcentive/components/contribution-month/" /> | |
| <bit-contribution-month {contribution-month-id}="contributionMonthId"/> | |
| </script> | |
| </div> | |
| <script src="../../../node_modules/steal/steal.js" | |
| main="@empty"> | |
| import viewModel from 'can-view-model'; | |
| window.viewModel = viewModel; | |
| import io from 'socket.io-client/socket.io'; | |
| import fixtureSocket from 'can-fixture-socket'; | |
| import canSet from 'can-set'; | |
| import fixture from 'can-fixture'; | |
| var mockServer = new fixtureSocket.Server(io); | |
| window.mockServer = mockServer; | |
| var contributionMonthStore = fixture.store([ | |
| {_id: "1", date: "2016-11-10T17:22:18.251Z"}, | |
| {_id: "2", date: "2016-10-05T16:22:18.251Z"} | |
| ], new canSet.Algebra(canSet.props.id('_id'))); | |
| mockServer.onFeathersService("api/contribution_months", contributionMonthStore, {id: "_id"}); | |
| // Postpone autorender till socket.io gets mocked: | |
| System.import('can-view-autorender').then(function(autorender){ | |
| autorender(function(){ | |
| console.log('can-view-autorender done.'); | |
| viewModel(document.getElementById("main")).set("contributionMonthId","1"); | |
| }) | |
| }); | |
| </script> |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| </head> | |
| <body> | |
| <div class='container'> | |
| <script type="text/stache" can-autorender id='main'> | |
| <can-import from="bootstrap/dist/css/bootstrap.css" /> | |
| <can-import from="bitcentive/styles.less" /> | |
| <can-import from="bitcentive/components/contribution-month/" /> | |
| <bit-contribution-month {contribution-month-id}="contributionMonthId"/> | |
| </script> | |
| </div> | |
| <script src="../../../node_modules/steal/steal.js" | |
| main="@empty"> | |
| import viewModel from 'can-view-model'; | |
| window.viewModel = viewModel; | |
| import io from 'socket.io-client/socket.io'; | |
| import fixtureSocket from 'can-fixture-socket'; | |
| import mockContributionMonthsService from 'bitcentive/models/fixtures/contribution-months'; | |
| // Mock socket.io server: | |
| var mockServer = new fixtureSocket.Server( io ); | |
| mockContributionMonthsService( mockServer ); | |
| // Postpone autorender till socket.io gets mocked: | |
| System.import('can-view-autorender').then(function(autorender){ | |
| autorender(function(){ | |
| console.log('can-view-autorender done.'); | |
| viewModel(document.getElementById("main")).set("contributionMonthId","1"); | |
| }) | |
| }); | |
| </script> | |
| </body> | |
| </html> |
| import fixture from 'can-fixture'; | |
| import json from './contribution-months.json'; | |
| import canSet from 'can-set'; | |
| // TODO: import algebra from ContributionMonths model. | |
| var contributionMonthStore = fixture.store(json, new canSet.Algebra(canSet.props.id('_id'))); | |
| export default function(mockServer){ | |
| mockServer.onFeathersService("api/contribution_months", contributionMonthStore, {id: "_id"}); | |
| } |
| [ | |
| { | |
| "_id": "1", | |
| "date": "2016-11-10T17:22:18.251Z", | |
| "monthlyOSProjects": [{ | |
| "significance": 10, | |
| "commissioned": true, | |
| "osProjectRef": { | |
| "_id": "1-CanJS", | |
| "name": "CanJS" | |
| } | |
| },{ | |
| "significance": 20, | |
| "commissioned": true, | |
| "osProjectRef": { | |
| "_id": "1-DoneJS", | |
| "name": "DoneJS" | |
| } | |
| },{ | |
| "significance": 30, | |
| "commissioned": true, | |
| "osProjectRef": { | |
| "_id": "1-StealJS", | |
| "name": "StealJS" | |
| } | |
| }], | |
| "monthlyClientProjects": [] | |
| }, | |
| {"_id": "2", "date": "2016-10-05T16:22:18.251Z"}, | |
| {"_id": "3", "date": "2016-19-01T15:22:18.251Z"} | |
| ] |
@justinbmeyer We can reduce further:
to just: