我正在学习 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 });
我应该在“xxxxxx”中放入什么来加载我的 json 文件？
谢谢!
更新
好吧，我已经弄清楚了!
App.ApplicationAdapter = DS.RESTAdapter.extend({
host: '/name of directory'
});
就我而言，我的项目位于 localhost/ember
以及以下作品:
App.ApplicationAdapter = DS.RESTAdapter.extend({
host: '/ember'
});
最佳答案
我也遇到了同样的问题。
您必须使用对文件的请求来扩展 DS.RESTAdapter，而不是从 HTML 链接到 JSON 文件，如下所示:
App.ApplicationAdapter = DS.RESTAdapter.extend({
host: '/products.json?jsonp=?'
});
这应该有效。 让我知道!
关于javascript - Ember - 链接到 JSON 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27682584/