2

私は Ember.js フレームワークが初めてです。

フレームワークから ajax 呼び出しを実行しようとしましたが、期待どおりの値が得られませんでした。

以下はページのコードです -

最初の ajax 呼び出しにリンクすると、期待どおりに動作します。

{{#linkTo listemployee class="span3 btn btn-large btn-block"}}Employees{{/linkTo}}

データを呼び出してテーブルに入力する -

App.ListemployeeRoute = Ember.Route.extend({
        setupController: function(controller) {
        $.getJSON('data/Tutorials.json', function(data) {
            controller.set('content',data);
        });
      }
    });

そしてデータのテンプレート -

<script type="text/x-handlebars" data-template-name="listemployee">
  <h3 class="demo-panel-title">This is the list for Employee</h3>
  <table border=2>
    <tr><td><b>Name</b></td><td><b>Address</b> </td><td><b> Phone</b></td><td colspan=3>Action<td></tr>
    {{#each item in content}}
      <tr><td>{{item.name}}</td><td>{{item.address}} </td><td> {{item.phone}}</td><td> {{#linkTo viewemployee item.name}}View{{/linkTo}} </td><td>Edit</td><td>Delete</td></tr>
    {{/each}}
   </table>
</script>

上記は期待どおりに機能しています。

しかし、私がクリックしたとき

{{#linkTo viewemployee item.name}}View{{/linkTo}}

上記のセクションの場合 -

私のコントローラーコードはApp.jsにあります-

App.Router.map(function() {
      this.route("listemployee", { path: "/employees" });
      this.resource("viewemployee", {
        path: "/employees/:name"
      });
    });

そして私のViewemployeeRouteは

App.ViewemployeeRoute = Ember.Route.extend({
      model: function(params) {
        return {name: params.name};
      },
      setupController: function(controller, model) {
        $.getJSON('data/Tutorials.json', function(data) {
            data.forEach(function(item){
                if(item.name === model.name)
                {
                    var tabledata = '<table border = \"1\" ><tr><td>Name</td><td>'+item.name+'</td></tr><tr><td>Address</td><td>'+item.address+'</td></tr><tr><td>Phone</td><td>'+item.phone+'</td></tr></table>';
                    $('#employeetable').html(tabledata);
                    controller.set('content',item);
                }
            });
        });
      }
    });

そして私のテンプレートコードは -

<script type="text/x-handlebars" data-template-name="viewemployee">
  <h3 class="demo-panel-title">This is the View Employee template</h3>
  <div id = "employeetable">

  </div>
</script>

問題 -

Viewリンクを初めてクリックしたときに、従業員のデータが表示されません。

しかし、ページを更新すると、データは期待どおりに表示されます。

View問題は、リンクをクリックすると、ページのレンダリング後に ajax からの応答が返ってくることだと思います。

Viewでは、リンクをクリックしたときに従業員関連の詳細が表示されるようにするには、コードで何をすればよいでしょうか?

この点で何か助けていただければ幸いです。

ありがとう。

答えから試した後、2を更新してください。しかし、それでも同じ結果が来ています。

次のように私の app.js を変更しました -

App.ListemployeeRoute = Ember.Route.extend({  
        model: function() {
            return App.Employee.findAll();
        }
    });

    App.ViewemployeeRoute = Ember.Route.extend({
      model: function(params) {
        return App.Employee.find(params);
      }
    });

    App.Employee.reopenClass({
      findAll: function() {
        var result = Ember.ArrayProxy.create({content: []});
        var self = this;
        $.ajax({
          url: 'data/Tutorials.json',
          type: 'GET',
          success: function(data, textStatus, xhr) {
            result.set('content', data);
          },
          error: function(xhr, textStatus, errorThrown) {
            alert('error');
          }
        });
        return result;
      },
      find: function(params) {
        var result = Ember.Object.create({content: null});
        var self = this;
        $.ajax({
          url: 'data/Tutorials.json',
          type: 'GET',
          success: function(data, textStatus, xhr) {
                data.forEach(function(item){
                    if(item.name === params.name)
                    {
                        result.set('content', item);
                    }
                });
            },
          error: function(xhr, textStatus, errorThrown) {
            alert('not found');
          }
        });
        return result;
      }
    });

そして私のデータファイルは -

[
    {
        "name": "John",
        "address": "John's Home",
        "phone": "John's Phone"
    },
    {
        "name": "Harry",
        "address": "Harry's Home",
        "phone": "Harry's Phone"
    },
    {
        "name": "Tom",
        "address": "Tom's Home",
        "phone": "Tom's Phone"
    }
]

ここで作品を見つけることができます -

http://www.phloxblog.in/ember-crud-ajax/

4

1 に答える 1

2

ビューをクリックして #linkTo 経由でモデルを渡すと、ルートのモデル部分は既にモデルを認識しているため実行されません。

また、原則として、ルートではなく、モデルで ajax 呼び出しを行う方が適切です。

App.ProjectsIndexRoute = Ember.Route.extend({  
  model: function() {
    return App.Project.findAll();
  }
});

App.Project.reopenClass({
  findAll: function() {
    var result = Ember.ArrayProxy.create({content: []});
    var self = this;
    $.ajax({
      url: '/projects.json',
      type: 'GET',
      data: {'user_id': App.currentUser.id},
      success: function(data, textStatus, xhr) {
        result.set('content', data.projects);
      },
      error: function(xhr, textStatus, errorThrown) {
        alert('error');
      }
    });

    return result;
  },

  find: function(project_id) {
    var result = Ember.Object.create({content: null, isLoaded: false});
    var self = this;
    $.ajax({
      url: '/projects/' + project_id + '.json',
      type: 'GET',
      success: function(data, textStatus, xhr) {
        result.setProperties(data.project);
        result.set('isLoaded', true);
      },
      error: function(xhr, textStatus, errorThrown) {
        alert('not found');
      }
    });

    return result;
  }
});
于 2013-03-27T10:58:29.000 に答える