使用LinkTo显示单个对象

时间:2013-09-04 02:37:06

标签: javascript json ember.js getjson

我没有使用EmberData,因为我对它不太满意。相反,我使用$.getJSON获取模型:

App.Persons = App.Model.extend({
    id : null,
    name : null,
    email : null
});

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

App.Persons.reopenClass({
    findAll : function() {
        return $.getJSON("personsjson.php").then(function(response) {
            var s = [];
            $.each(response, function(i, row) {
                return s.pushObject(App.Persons.create(row));
            });

            return s;
        });
    }
});

App.Router.map(function() {
    this.resource('persons', function() {
        this.resource('person', {
            path : '/:person_id'
        });
    });
});

我想在有人点击使用LinkTo Helper的人名时显示电子邮件。所以我创建了一个这样的Person路线,

App.PersonRoute = Ember.Route.extend({
    model : function(params) {
        return App.Persons.findBy('id', params.person_id);
    }
});

但是在网址上,我没有在最后获得身份证,而是获得了“未定义”。

这就是我正在做的HTML方面,

            {{#each person in content }}
            <tr><td>
             {{#link-to 'person' this}} <p>{{person.name}}</p>{{/link-to}}
            </td></tr>
            {{/each}}

可能是什么问题?

如果有人有兴趣,我会在后端这样做,

SELECT id, name, email FROM persons;

1 个答案:

答案 0 :(得分:0)

问题是this是对App.PersonsController的引用,而不是App.Person模型。为了实现这一目标,请将person传递给{{#linkTo}},如:

{{#each person in content }}
    <tr><td>
    {{#link-to 'person' person}} <p>{{person.name}}</p>{{/link-to}}
    </td></tr>
{{/each}}

----更新-----

同时尝试将模型重命名为App.Person而不是App.Persons

App.Person = App.Model.extend({
    id : null,
    name : null,
    email : null
});

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

App.Person.reopenClass({
    findAll : function() {
        return $.getJSON("personsjson.php").then(function(response) {
            var s = [];
            $.each(response, function(i, row) {
                return s.pushObject(App.Person.create(row));
            });

            return s;
        });
    }
});