Question

我正在学习Ember，我正在制作一个简单的应用程序，但我遇到了一个奇怪的问题。我有一个路由设置，它只在我重新加载页面时拉取数据。这是我的代码：

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

// Router paths
App.Router.map(function () {

    // Homepage
    this.resource('index', { path: '/' });

    // Book view
    this.resource('book', { path: '/book/:id/:version' });

});

// Homepage route
App.IndexRoute = Ember.Route.extend({
    model: function () {
        // Get all the books
        return Ember.$.getJSON('/books');
    }
});


// Single book view
App.BookRoute = Ember.Route.extend({
    model: function (params) {
        // Get a single book
        return Ember.$.getJSON('/book?id=' + params.id + '&version=' + params.version);
    }
});

当我从主页点击进入/＃/ book / 1/1时，该页面为空白。当我在那里刷新页面时，它会加载数据并且一切正常。

这是为什么？当用户从主页点击时，我该怎么做才能使其正常工作？

Answer 1

谢谢大家的建议。我在这里用这段代码想出来了：

App.BookRoute = Ember.Route.extend({
    setupController: function (controller,model) {
        // Get a single book
        Ember.$.getJSON('/book?id=' + model.id + '&version=' + model.version,
            function (data) {
                controller.set('model',data);
            });
    }
});

我使用setupController而不是model。

Answer 2

你应该在link-to中传递一个模型。粘贴模板代码以检查如何创建链接。查看此信息以获取更多信息http://emberjs.com/guides/templates/links/

Answer 3

如果您使用link-to helper，则不得在此设置上下文模型...您只需设置一个id，

{{#each book in books}}
  {{#link-to "book" book.id}}{{book.name}}{{/link-to}}
{{/each}}

将要求下一条路线的模型。

Answer 4

Ember link-to助手不执行model回调。我最近处理的情况非常类似，这就是我解决它的方法：

// In the index template
{{#each book in model}}
  {{#link-to 'book' book}}{{book.name}}{{/link-to}}
{{/each}}

当您点击链接时，您将获得一个类似于现在的空白页面，因为BookRoute模型回调未被触发。但是，将{<1}}函数将被解雇。您可以使用它来获取有关该书的其他详细信息。

BookController#init

这样，如果通过App.BookController = Ember.Controller.extend({ init: function() { this._super(); // Replace doesNotHaveAllInfo with your check if (doesNotHaveAllInfo) { this.set('model', Ember.$.getJSON('/book?id=' + this.get('model.id') + '&version=' + this.get('model.version'))); } }, });加载图书，则会获取新的详细信息。请注意，这需要link-to路线上加载的图书至少包含index和id。

或者，如果您刷新页面，则会发生version回调，并且您的model检查将返回false。无论您点击doesNotHaveAllInfo还是刷新页面，都应该会看到您的数据。

我还建议将link-to代码抽象为可重用的方法，也许在模型上，如下所示：

Ember.$.getJSON

然后，您可以使用App.Book.reopenClass({ find: function(id, version) { return Ember.$.getJSON('/book?id=' + id + '&version=' + version); } });在路线和App.Book.find()中退回模型。

路由仅在页面刷新时加载 - Ember JS

4 个答案: