Reputation: 1994

Ember - linking to JSON file

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!

UPDATE

I suppose to make this questions a bit simpler:

I have an index.html file, an app.js file, and a products.json file , all in the same directory
I want to use this in my app.js file:

App.ApplicationAdapter = DS.RESTAdapter.extend({ xxxxxxxxx });

What do I put in 'xxxxxx' to load my json file?

Thanks!

UPDATE

Ok, I have figured this out duh!

App.ApplicationAdapter = DS.RESTAdapter.extend({
  host: '/name of directory'
});

In my case my project is at localhost/ember

and the following works:

App.ApplicationAdapter = DS.RESTAdapter.extend({
  host: '/ember'
});

Upvotes: 1

Answers (2)

user1525612

Reputation: 1994

App.ApplicationAdapter = DS.RESTAdapter.extend({
  host: '/name of directory'
});

Also note that I had to remove the .json extension from my file. Now it's just call products (a text file). When I add the .json extension it can't find the file.

Upvotes: 0

PDXIII

Reputation: 1146

I had the same problem.

Instead of linking to the JSON file from the HTML you must extend the DS.RESTAdapter with a request to your file, like this:

App.ApplicationAdapter = DS.RESTAdapter.extend({
  host: '/products.json?jsonp=?'
});

This should work. Let me know!

Upvotes: 1

Ember - linking to JSON file

Answers (2)

Related Questions