Question

我正在编写一个来自codeschool的教程/示例。它们都运行良好，但示例是使用

App.ApplicationAdapter = DS.FixtureAdapter.extend();

我现在想要保持原样，但将产品数据移到外部JSON文件中。

这是我的app.js文件：

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"
    }
];

这是我的HTML（index.html）文件：

<!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>

教程说要创建一个包含以下内容的json文件：

{"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"}
  ]
}

然后改变

App.ApplicationAdapter = DS.FixtureAdapter.extend();

为：

App.ApplicationAdapter = DS.RESTAdapter.extend();

等

我似乎无法链接到此JSON文件。我只是想知道，我应该在上面的ApplicationAdapter中添加其他内容吗？我是否正确将JSON文件包含在我的HTML文件的头部？

基本上只需要一些帮助来制作上面的例子，它可以正常使用外部JSON文件。

谢谢！

更新

我想让这些问题更简单一些：

我有一个index.html文件，一个app.js文件和一个products.json文件，都在同一个目录中
我想在我的app.js文件中使用它：

App.ApplicationAdapter = DS.RESTAdapter.extend（{ XXXXXXXXX }）;

我放入什么＆x; xxxxxx＆＃39;加载我的json文件？

谢谢！

更新

好的，我已经弄明白了！

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

在我的情况下，我的项目是在localhost / ember

以及以下作品：

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

Answer 1

我遇到了同样的问题。

您必须使用对文件的请求扩展DS.RESTAdapter，而不是从HTML链接到JSON文件，如下所示：

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

这应该有效。让我知道！

Answer 2

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

另请注意，我必须从文件中删除.json扩展名。现在它只是呼叫产品（文本文件）。当我添加.json扩展名时，它无法找到该文件。

Ember - 链接到JSON文件

2 个答案: