can
Version:
MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.
174 lines (159 loc) • 6.26 kB
HTML
<my-mmy></my-mmy>
<script src="../../node_modules/steal/steal.js" dev-bundle main="@empty" id="demo-source">
import { ajax, fixture, QueryLogic, StacheElement, type } from "can";
fixture.delay = 1200;
fixture("/makes", fixture.store([
{ id: "1", name: "Ford" },
{ id: "2", name: "Nissan" }
],
{ identity: ["id"] }
));
fixture("/models", fixture.store([
{ id: "1", makeId: "1", name: "Mustang", years: [ 2013, 2014 ] },
{ id: "2", makeId: "1", name: "Focus", years: [ 2013, 2014 ] },
{ id: "3", makeId: "2", name: "Altima", years: [ 2013, 2014 ] },
{ id: "4", makeId: "2", name: "Leaf", years: [ 2013, 2014 ] },
],
{ identity: ["id"] }
));
fixture("/vehicles", fixture.store([
{id: 1, modelId: "1", year: "2013", name: "2013 Mustang", thumb: "http://mustangsdaily.com/blog/wp-content/uploads/2012/07/01-2013-ford-mustang-gt-review-585x388.jpg"},
{id: 2, modelId: "1", year: "2014", name: "2014 Mustang", thumb: "http://mustangsdaily.com/blog/wp-content/uploads/2013/03/2014-roush-mustang.jpg"},
{id: 3, modelId: "2", year: "2013", name: "2013 Focus", thumb: "http://images.newcars.com/images/car-pictures/original/2013-Ford-Focus-Sedan-S-4dr-Sedan-Exterior.png"},
{id: 4, modelId: "2", year: "2014", name: "2014 Focus", thumb: "http://ipinvite.iperceptions.com/Invitations/survey705/images_V2/top4.jpg"},
{id: 5, modelId: "3", year: "2013", name: "2013 Altima", thumb: "http://www.blogcdn.com/www.autoblog.com/media/2012/04/04-2013-nissan-altima-1333416664.jpg"},
{id: 6, modelId: "3", year: "2014", name: "2014 Altima", thumb: "http://www.blogcdn.com/www.autoblog.com/media/2012/04/01-2013-nissan-altima-ny.jpg"},
{id: 7, modelId: "4", year: "2013", name: "2013 Leaf", thumb: "http://www.blogcdn.com/www.autoblog.com/media/2012/04/01-2013-nissan-altima-ny.jpg"},
{id: 8, modelId: "4", year: "2014", name: "2014 Leaf", thumb: "http://images.thecarconnection.com/med/2013-nissan-leaf_100414473_m.jpg"},
],
{ identity: ["id"] }
));
class MyMmy extends StacheElement {
static view = `
<select value:bind="this.makeId"
{{# if(this.makes.isPending) }}disabled{{/ if }}>
{{# if(this.makes.isPending) }}
<option value=''>Loading...</option>
{{ else }}
{{^ this.makeId }}
<option value=''>Select a Make</option>
{{/ this.makeId }}
{{# for( make of this.makes.value) }}
<option value:from="make.id">{{ make.name }}</option>
{{/ for }}
{{/ if }}
</select>
{{# if(this.modelsPromise) }}
{{# if(this.models) }}
<select value:bind="this.modelId">
{{^ this.modelId }}
<option value=''>Select a Model</option>
{{/ this.modelId }}
{{# for(model of this.models) }}
<option value:from="model.id">{{ model.name }}</option>
{{/ for }}
</select>
{{ else }}
<select disabled><option>Loading Models</option></select>
{{/ if }}
{{ else }}
<select disabled><option>Models</option></select>
{{/ if }}
{{# if(this.years) }}
<select value:bind="this.year">
{{^ this.year }}
<option value=''>Select a Year</option>
{{/ this.year }}
{{# for(year of this.years ) }}
<option value:from="year">{{ year }}</option>
{{/ for }}
</select>
{{ else }}
<select disabled><option>Years</option></select>
{{/ if }}
<div>
{{# for(vehicle of this.vehicles) }}
<h2>{{ vehicle.name }}</h2>
<img src:from="vehicle.thumb" width="200px"/>
{{/ for }}
</div>
`;
static props = {
makeId: type.maybeConvert(String),
makes: {
get() {
return ajax({
type: "GET",
url: "/makes"
}).then(resp => resp.data);
}
},
modelId: {
type: String,
value({ lastSet, listenTo, resolve }) {
listenTo(lastSet, resolve);
listenTo("makeId", () => resolve(""));
}
},
get modelsPromise() {
let makeId = this.makeId;
if( makeId ) {
return ajax({
type: "GET",
url: "/models",
data: { filter: { makeId } }
}).then(resp => {
return resp.data;
});
}
},
models: {
async(resolve) {
let promise = this.modelsPromise;
if(promise) {
promise.then(resolve);
}
}
},
get model() {
let models = this.models,
modelId = this.modelId;
if(models && models.length && modelId) {
let matched = models.filter(model => {
return modelId == model.id;
});
return matched[0];
}
},
get years() {
let model = this.model;
return model && model.years;
},
year: {
type: String,
value({ lastSet, listenTo, resolve }) {
listenTo(lastSet, resolve);
listenTo("modelId", () => resolve(""));
}
},
vehicles: {
async(resolve) {
let year = this.year,
modelId = this.modelId;
if(modelId && year) {
ajax({
type: "GET",
url: "/vehicles",
data: { filter: { modelId, year } }
}).then(resp => {
resolve(resp.data);
});
} else {
resolve([]);
}
}
}
};
};
customElements.define("my-mmy", MyMmy);
</script>