Cách truy cập dữ liệu từ các tuyến trong mẫu ứng dụng Ember?

Question

Tôi đang theo dõi các tài liệu cho Ember 2.3 và dường như không tìm thấy bất cứ nơi nào một cái gì đó rất cơ bản: làm thế nào để truy cập một giá trị được cung cấp bởi móc mô hình của tuyến đường bên trong mẫu chính: application.hbs?

tuyến/client.js

// ... 
export default Ember.Route.extend({ 
    model() { 
     return { 
      navigation: [ 
       { 
        title: "Projects", 
        link: "projects" 
       }, 
       { 
        title: "My Specifications", 
        link: "specs" 
       } 
      ] 
     } 
    } 
}); 

templates/application.hbs

<nav> 
    {{#each navigation as |navItem|}} 
     <li>{{#link-to navItem.link}} {{navItem.title}} {{/link-to}}</li> 
    {{/each}} 
</nav> 
{{outlet}} 

Như hiện nay, các đối tượng chuyển hướng có thể truy cập vào mẫu của tuyến đường (client.hbs) nhưng không phải mẫu ứng dụng.

Answer 1

Sau đây là cách nó được thực hiện (trừ khi ember đi lên với một cách tốt hơn trong phiên bản tương lai):

tuyến/client.js

// ... 
export default Ember.Route.extend({ 
    setupController() { 
     this.controllerFor('application').set('navigation', ["nav1", "nav2"]); 
    } 
}); 

Cảm ơn, Ivan, cho câu trả lời!

Answer 2

Làm sao người ta truy cập một giá trị được cung cấp bởi móc mô hình của tuyến đường bên trong mẫu chính

Theo mặc định, bên trong setupController móc của tuyến đường, Ember sẽ set the property model on your controller với giá trị giải quyết của lời hứa trở lại từ móc model của tuyến đường.

Nghĩa là bạn chỉ có thể sử dụng tài sản model trong mẫu của bạn để truy cập model.navigation:

<nav> 
    {{#each model.navigation as |navItem|}} 
     <li>{{#link-to navItem.link}} {{navItem.title}} {{/link-to}}</li> 
    {{/each}} 
</nav> 

Nếu bạn muốn sử dụng một tên khác nhau, bạn có thể ghi đè lên móc setupController và thiết lập tên mình:

export default Ember.Route.extend({ 
    // ... 
    setupController(controller, model) { 
    this.set('navigation', Ember.get(model, 'navigation')); 
    } 
    // ... rest of the code 
}) 

Điều đó có nghĩa là bạn hiện có thể sử dụng navigation thay vì model.navigation bên trong mẫu của bạn. Một cách khác có thể để thêm một alias bên trong điều khiển của bạn cho model tài sản:

export default Ember.Controller.extend({ 
    navigation: Ember.computed.alias('model.navigation') 
    // ... rest of the code 
}) 

nào sẽ cho phép bạn cũng như để sử dụng navigation thay vì model.navigation.

Tuy nhiên, nếu bạn muốn có một số loại điều hướng toàn cầu trong ứng dụng của mình, cách tốt hơn là sử dụng Service mà bạn sẽ đưa vào bộ điều khiển cần điều hướng. Một cái gì đó như:

// app/services/navigation.js 
export default Ember.Service.extend({ 
    items: null, 

    init() { 
    this._super(...arguments); 
    this.set('items', [{ 
     title: "Projects", 
     link: "projects" 
    }, { 
     title: "My Specifications", 
     link: "specs" 
    }]); 
    } 
}); 

Và sau đó tiêm nó trong bộ điều khiển của bạn:

export default Ember.Controller.extend({ 
    navigation: Ember.service.inject() 
}); 

Và bây giờ bạn có thể truy cập tới điều hướng trong mẫu của bộ điều khiển đó là tốt.

Answer 3

Tôi sẽ giải quyết vấn đề này như thế này. Tạo thành phần điều hướng chấp nhận thông số tùy chỉnh.

Templates application.hbs

Bây giờ trong client.js bạn

apiURL: 'navigations/client' 

Và thành phần tùy chỉnh tùy chỉnh navigation.js bạn

resolvedRouteNavs: function() { 
    return DS.PromiseArray.create({ 
      promise: store.query(this.get('url'), { user? : userID?? }); 
    }) 
}.property('apiURL') 

Và tùy chỉnh điều hướng.hbs.

{{#each resolvedRouteNavs as |navItem|}} 
    {{navItem.name}} 
{{/each}} 

Nếu bạn đang làm việc với mảng tĩnh như điều hướng

sau đó không giải quyết là cần thiết và sẽ là đơn giản chỉ để ra đưa mảng binded, đó là khác nhau cho mỗi tuyến đường.

client.js

navs: [{ name: '1', route: 'foo'}, { name: '2', route: 'bar' }] 

một số công trình khác nhau-place.js

navs: [{ name: 'blah', route: 'foo.bar'}, { name: 'meh', route: 'bar.foo' }] 

Và thực sự mô hình móc nên chứa dữ liệu được lấy từ máy chủ. Nếu không sử dụng hook setupController.

setupController: function(controller, model) { 
     this._super(controller, model); 

     controller.setProperties({ 
      nav: [] 
     });