Question

我正在学习EmberJS，因为我觉得使用JS框架的单页应用程序和使用后端API是事情的发展方向。我最近学会了Laravel没有任何特别的问题，但我发现Ember非常困难。

我的大多数问题都是我完成的，但我有一个我甚至不知道如何调试的问题。

基本上，我的界面显示了一个客户列表。单击名称将转到该客户端。所有这些都连接到基于PHP / Laravel的API，它完全正常并且格式正确。数据不是问题所在。

那就是说，我应该指出我的数据没有严格的“id”，而是使用更像guid：912ec803b2而不是231的连接.API是为了处理它而构建的，这是一个要求。这也意味着数据中没有“id”，但是有一个“哈希”可能会以某种方式混淆ember？

此基本功能似乎无法正常工作。当用户单击“客户端”链接时，它会导航到客户端。但是它会在客户列表页面中添加一个空行，然后转到客户端页面。返回到客户端页面会显示额外的空行，如果再次单击，则会重复出现相同的事情。

在Chrome中检查灰烬检查器会显示数据收集增加，并添加空白数据。我不确定为什么。

我在这里发布了代码。这应该是所有必要的。这种行为对于年轻球员来说是一个常见的陷阱，我做过一些与众不同的事情吗？

道歉，只是不想省略相关内容。

// app.js

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

App.Router.map(function() {

    this.resource('clients', function() {
        this.route('new');

    });
    this.resource('client', { path: 'clients/:client_hash' }, function(){

    });


});

App.Store = DS.Store.extend({
    url: 'http://myclientinfo'
});

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

App.Client = DS.Model.extend({
    name: DS.attr('string'),
    hash: DS.attr('string')
});

App.ClientsRoute = Ember.Route.extend({
  model: function(){
    return this.store.find('client');
  }
});

App.ClientIndexRoute = Ember.Route.extend({
  model: function(params){
    return this.store.find('client', params.client_hash);
  }
});


// templates

    <script type="text/x-handlebars">

    <div class="container">

      <ul class="nav nav-pills">
        <li>{{#link-to 'clients'}}Clients{{/link-to}}</li>
      </ul>


      {{outlet }}

      </div>
    </script>


  <script type="text/x-handlebars" id="client">
  client outer
  {{outlet}}
  </script>


  <script type="text/x-handlebars" id="clients">
  client outer
  {{outlet}}
  </script>


  <script type="text/x-handlebars" id="client/index">
  client index
  <h1>{{name}}</h1>
  </script>

    <script type="text/x-handlebars" id="clients/index">

  <div class="row">
  <div class="col-md-12 col-lg-12">
  <h1>All Clients</h1>
  </div>
  </div>

  <div class="row"><div class="col-md-12 col-lg-12">
  {{#link-to 'clients.new' class="btn btn-info add-btn"}}
  <i class="fa fa-plus"> Add new client</i>
  {{/link-to}}
  </div></div>

  <div class="row">
  <div class="col-md-12 col-lg-12">

    <table class="table table-striped">
      <thead>
        <tr>
          <th>Name</th>
        </tr>
      </thead>

      <tbody>

      {{#each item in model}}
      <tr>
        <td>{{#link-to 'client' item.hash}}{{item.name}}{{/link-to}}</td>

      </tr>
      {{/each}}

      </tbody>
    </table>


    </div>
    </div>
    </script>

Answer 1

好的，只是跟着这个，因为我有点修理它。

this.resource('client', { path: 'clients/:client_hash' }, function(){

这条线比我想象的要多。我认为它更像是一个定义占位符，就像在Laravel中一样。

Route::get('user/{id}', function($id)

使用的名称，无论是{id}还是{hash}还是{poopypants}都无关紧要，因为它在那时被定义和使用。

我把它更改为：

this.resource('client', { path: 'clients/:client_id' }, function(){

这可以让默认的链接帮助程序工作，而不是简单地获取“未定义”，就像我尝试过的其他内容一样。该段的名称实际上是有意义的，它用于派生段的实际值。

完成此操作后，我能够稍微重构循环代码，修复帮助程序。

{{#each item in model}}
  <tr>
    <td>{{#link-to 'client' item}}{{item.name}}{{/link-to}}</td>

这也可以进一步重构。

{{#each}}
<tr>
    <td>{{#link-to 'client' this}}{{name}}{{/link-to}}</td>

请注意，{{#link-to 'client' this}}有效，而{{#link-to 'client' this.id}}大部分都有效，但会收到OP中声明的错误。我认为这个错误已经花了我三天来解决。

空白条目已添加到Ember Data

1 个答案: