路由只加載頁面刷新 - Ember JS

我目前正在學習Ember和我正在做一個簡單的應用程序，但我遇到了一個奇怪的問題。我有一個路由設置，它只在我重新加載頁面時拉取數據。這裏是我的代碼：路由只加載頁面刷新 - Ember JS

// 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，頁面是空白的。當我剛剛刷新頁面時，它會加載數據並且一切正常。

這是爲什麼？當用戶從主頁上點擊時，我可以做些什麼來使其工作？

來源

2014-01-16 Amir

如果您已經擁有了索引路線中的所有書籍，爲什麼您要爲BookRoute中的每本書做出請求？順便說一句，看看這裏http://emberjs.com/guides/routing/specifying-a-routes-model/。有一個文本：注意：具有動態段的路由只有在通過URL輸入時纔會調用其模型鉤子。如果路線是通過轉換（例如，當使用鏈接到Handlebars助手時），那麼已經提供了一個模型上下文並且不執行該鉤子。沒有動態段的路線將始終執行模型掛鉤。 – fanta

我不知道這是你的情況，你是否使用鏈接來過渡到書？如果是這樣，那就是頁面爲空的原因，模型鉤子ID沒有執行，因爲你已經有了模型。當你刷新頁面時，它會被執行，因爲在那種情況下，你直接輸入了URL。 – fanta

我正在使用link-to。如果我要在主頁上加載該書的所有細節，JSON將會非常大。主頁只是一本書的列表，然後當用戶點擊一本書時，我想加載該書的特定詳細信息。 – Amir

謝謝大家的建議。我想出了這個代碼在這裏：

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而不是模型。

來源

2014-01-22 17:03:13 Amir

你應該通過鏈接到模型。粘貼你的模板代碼來檢查你是如何創建鏈接的。檢查此信息以獲取更多信息http://emberjs.com/guides/templates/links/

來源

2014-01-16 18:33:11

-1

The Ember link-to幫助程序不會執行model回調。我最近處理的情況非常喜歡這一點，這裏是我如何解決它：

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

當你點擊鏈接，你會得到一個空白頁，像你現在的樣子，因爲BookRoute模型回調不會被解僱。但是，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回調，並且您的doesNotHaveAllInfo檢查將返回false。無論您點擊link-to還是刷新頁面，您都應該看到您的數據。

我也建議抽象的Ember.$.getJSON代碼轉換成可重複使用的方法，也許在模型上，這樣的：

App.Book.reopenClass({ 
    find: function(id, version) { 
    return Ember.$.getJSON('/book?id=' + id + '&version=' + version); 
    } 
});

然後可以使用App.Book.find()在您的路線，你BookController都返回模型。

來源

2014-01-17 04:30:33

當您說「用您的支票替換doesNotHaveAllInfo」時，我在檢查什麼？ – Amir

你會檢查你的模型，看它是否有你想要顯示在這個頁面上的額外細節。例如：'if（this.get（'model.details'）== undefined）' –

如果您使用鏈路來幫手，不能設置上下文模型在這一個...你只需要設置一個ID，

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

和未來路線的車型將請求。

來源

2014-04-10 23:58:31

路由只加載頁面刷新 - Ember JS

回答

相關問題