Question

我的以下Ember App适用于FIXTUREAdapter。现在我尝试使用RESTAdapter代替FIXTURE。但现在控制台显示错误：

GET http://localhost/myApp/note.json/notes 404 (Not Found)。

Error while loading route: undefined

我正在使用 XAMPP 。

window.App = Ember.Application.create({
    LOG_TRANSITIONS: true
});

App.ApplicationAdapter = DS.RESTAdapter.extend({
  namespace: 'myApp/note.json'
});

App.Router.map(function() {
  this.route('notes');
  this.route('note', { path: 'note/:note_id' });
});

App.NotesRoute = Ember.Route.extend ({
 model: function() {
    return this.store.findAll('note');
 }
});

App.NoteRoute = Ember.Route.extend ({
 model: function(params) {
    return this.store.find('note', params.note_id);
 }
});

App.Note = DS.Model.extend ({
  title: DS.attr('string'),
  body: DS.attr('string')
});

note.json：

{
  "notes": [ 
      {
       id: 1,
       title: 'hello world', 
       body: 'ciao ciao'
      }, 
      { 
       id: 2, 
       title: 'javascript frameworks',
       body: 'Backbone.js, Ember.js'
      },
      {
       id: 3,
       title: 'Find a job in Berlin',
       body: 'Monster'
      }
   ]
}

index.html把手模板：

<script type="text/x-handlebars" data-template-name="application">
  {{partial 'navbar'}} 
  {{outlet}}
</script>

<script type='text/x-handlebars' data-template-name='_navbar'>
 {{#link-to 'index'}}Home{{/link-to}}
 {{#link-to 'notes'}}Notes{{/link-to}}
</script>

<script type='text/x-handlebars' data-template-name='index'>
 <h1>Index page!</h1>
</script>

<script type="text/x-handlebars" data-template-name="notes">
  <ul class="nav nav-pills nav-stacked">
      {{#each}}
        <li class="list-group-item">
          {{#link-to 'note' this}} {{title}} {{/link-to}}
        </li>
      {{else}}
        <li>No data!</li>
      {{/each}}
   </ul>
</script>

<script type="text/x-handlebars" data-template-name="note">
 <p>{{title}}</p>
 <p>{{body}}</p>
</script>

Answer 1

According to the docs，namespace是前缀。

你可能想要这个：

App.ApplicationAdapter = DS.RESTAdapter.extend({
  namespace: 'myApp'
});

当您使用PHP时，请将notes.json重命名为notes.php，并确保在回复时设置正确的标头：

<?php
header("Content-Type: application/json");
?>

// Add your json data here:
{
  "notes": [
  {id: 1, ...},
 ]
}

如果你没有使用任何PHP框架，你需要自己重写网址（如果你使用框架，它很可能会为你重写网址）。

由于您使用的是Apache，只需将.htaccess文件添加到与包含notes.php文件的目录相同的目录中，然后添加以下重写规则：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteRule ^notes$ notes.php
</IfModule>

此重写规则可让您访问http://localhost/myApp/notes（不含.php文件扩展名。）

您还需要确保使用有效的JSON，即应引用所有内容：

{
    "notes": [
        {
            "id": "1",
            "title": "helloworld",
            "body": "ciaociao"
        },
        {
            "id": "2",
            "title": "javascriptframeworks",
            "body": "Backbone.js, Ember.js"
        },
        {
            "id": "3",
            "title": "FindajobinBerlin",
            "body": "Monster"
        }
    ]
}

您应该像这样设置路线：

this.resource("notes", function() {
    this.route("view", {
        path: "/:note_id"
    });
});

然后您需要将"note"模板重命名为"notes/view"，如下所示： <script type="text/x-handlebars" data-template-name="notes/view">

并重写您的"notes"模板：

<script type="text/x-handlebars" data-template-name="notes">
  <ul class="nav nav-pills nav-stacked">
      {{#each note in model}}
        <li class="list-group-item">
          {{#link-to 'notes.view' note}} {{note.title}} {{/link-to}}
        </li>
      {{else}}
        <li>No data!</li>
      {{/each}}
   </ul>
   {{outlet}}
</script>

EmberJs：RESTAdapter无法获取json文件，显示错误404（未找到）

1 个答案: