I'm working through a tutorial/example from codeschool. It's all working nicely but the example is using
App.ApplicationAdapter = DS.FixtureAdapter.extend();
and I would like to now keep everything exactly as it is, but move the product data to an external JSON file.
Here is my app.js file:
var App = Ember.Application.create({
LOG_TRANSITIONS: true
});
App.Router.map(function(){
this.route('about', {path:'/aboutus'});
this.resource('products', function() {
this.resource('product', { path: '/:product_id' });
});
});
App.ApplicationAdapter = DS.FixtureAdapter.extend();
App.IndexController = Ember.Controller.extend ({
productsCount: 6,
logo: 'images/logo.png',
time: function() {
return (new Date()).toDateString()
}.property()
});
App.Product = DS.Model.extend({
title: DS.attr('string'),
price: DS.attr('number'),
description: DS.attr('string'),
isOnSale: DS.attr('boolean'),
image: DS.attr('string'),
reviews: DS.hasMany('review', {async:true})
});
App.Review = DS.Model.extend ({
text: DS.attr('string'),
reviewedAt: DS.attr('date'),
product: DS.belongsTo('product')
});
App.ProductsRoute = Ember.Route.extend({
model: function() {
return this.store.findAll('product');
}
});
App.Product.FIXTURES = [
{
id: 1,
title: 'Flint',
price: 99,
description: 'Flint is a hard, sedimentary cryptocrystalline form of the mineral quartz, categorized as a variety of chert.',
image: 'images/products/flint.png',
reviews: [100,101]
},
{
id: 2,
title: 'Kindling',
price: 249,
description: 'Easily combustible small sticks or twigs used for starting a fire.',
image: 'images/products/kindling.png',
reviews: [100,101]
}
];
App.Review.FIXTURES = [
{
id: 100,
product: 1,
text: "Sarted a fire in no time"
},
{
id: 101,
product: 1,
text: "Not the brightest flame of the flame"
}
];
Here is my HTML (index.html) file:
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.10.2.js"></script>
<script src="handlebars-v2.0.0.js"></script>
<script src="ember-1.9.1.js"></script>
<script src="ember-data.js"></script>
<script src="app.js"></script>
<script src="products.json"></script>
<link rel="stylesheet" href="bootstrap.css">
</head>
<body>
<script type='text/x-handlebars' data-template-name='application'>
{{#link-to 'index'}}Homepage{{/link-to}}
{{#link-to 'about'}}About{{/link-to}}
{{#link-to 'products'}}Products{{/link-to}}
<div class='navbar'>..</div>
<div class='container'>{{outlet}}</div>
<footer class='container'>..</div>
</script>
<script type='text/x-handlebars' data-template-name='index'>
<h1>Welcome to the Flint & Flame!</h1>
<p>There are {{productsCount}} products</p>
<img {{bind-attr src='logo'}} alt='logo' />
<p>Rendered on {{time}}</p>
</script>
<script type='text/x-handlebars' data-template-name='about'>
<h1>About the Fire Spirits</h1>
</script>
<script type='text/x-handlebars' data-template-name='products'>
<div class='row'>
<div class='col-md-3'>
<div class='list-group'>
{{#each}}
{{#link-to 'product' this classNames='list-group-item'}}
{{title}}
{{/link-to}}
{{/each}}
</div>
</div>
<div class='col-sm-9'>
{{outlet}}
</div>
</div>
</script>
<script type='text/x-handlebars' data-template-name='product'>
<div class ='row'>
<div class ='col-md-7'>
<h1>{{title}}</h1>
<p>{{description}}</p>
<p>Buy for $ {{price}}</p>
</div>
<div class='col-md-5'>
<img {{bind-attr src='image'}} class ='img-thumbnail' 'img-rounded' />
</div>
<h3>Reviews</h3>
<ul>
{{#each reviews}}
<li>{{text}}</li>
{{else}}
<li><p class='text-muted'>
<em>No reviews yet</em>
</p><li>
{{/each}}
</ul>
</div>
</script>
<script type='text/x-handlebars' data-template-name='products/index'>
<p class='text-muted'>Choose a product</p>
</script>
</body>
</html>
The tutorial says to create a json file with the following in it:
{"products": [
{
"id": 1,
"title": "Flint",
"price": 99,
"description": "Flint is a hard, sedimentary cryptocrystalline form of the mineral quartz, categorized as a variety of chert.",
"isOnSale": true,
"image": "images/products/flint.png",
"reviews": [100,101]
},
{
"id": 2,
"title": "rfgergerg",
"price": 34,
"description": "sdfdfsdfsdfsdf, categorized as a variety of chert.",
"isOnSale": false,
"image": "images/products/flint.png",
"reviews": [100,101]
}
],
"reviews": [
{"id": 100, "product":1, "text": "efefefefefe"}
]
}
and then to change
App.ApplicationAdapter = DS.FixtureAdapter.extend();
to:
App.ApplicationAdapter = DS.RESTAdapter.extend();
etc.
I can't seem to link to this JSON file. I just wanted to know, should I add anything else to the above ApplicationAdapter? Am I right to include the JSON file in the head of my HTML file?
Basically just need some assistance in making the above example, which works fine, use an external JSON file instead.
Thanks!
