在ember.js中訪問另一個模型數據

Question

我正在嘗試構建一個小的資產跟蹤系統。 我有很多資產，而且有很多標簽。 資產有很多標簽，總之

我希望能夠從列表中選擇標簽，並僅顯示屬於所選標簽的資產。

我很難弄清楚如何獲取選擇視圖以顯示標簽列表。 我覺得這與我的路線有關...

我正在嘗試使用this.controllerFor('tags').set('content', this.store.find('tag')將標簽數據傳遞到資產路由，但似乎沒有設置數據正確...

我也意識到我缺乏過濾列表的邏輯。

http://jsfiddle.net/viciousfish/g7xm7/

JavaScript代碼：

App = Ember.Application.create({
 ready: function() {
    console.log('App ready');
  }
});

App.ApplicationAdapter = DS.FixtureAdapter.extend();

//ROUTER
App.Router.map(function () {
  this.resource('assets', { path: '/' });
  this.resource('tags', { path: '/tags' });
});

//ROUTES
App.AssetsRoute = Ember.Route.extend({
  model: function () {
    return this.store.find('asset');
  },
  setupController: function(controller, model) {
    this._super(controller, model);
    this.controllerFor('tags').set('content', this.store.find('tag') );
  }
});

//Tags Controller to load all tags for listing in select view
App.TagsController = Ember.ArrayController.extend();

App.AssetsController = Ember.ArrayController.extend({
  needs: ['tags'],
  selectedTag: null
});


//MODEL
App.Asset = DS.Model.extend({
    name: DS.attr('string'),
    tags: DS.hasMany('tag')
});

App.Tag = DS.Model.extend({
    name: DS.attr('string'),
    assets: DS.hasMany('asset')
});

//FIXTURE DATA
App.Asset.FIXTURES = [
{
    id: 1,
    name: "fixture1",
    tags: [1,2]
},
{
    id: 2,
    name: "fixture2",
    tags: [1]
},   
{
    id: 3,
    name: "fixture3",
    tags: [2]
}];

App.Tag.FIXTURES = [
{
    id: 1,
    name: 'Tag1',
    assets: [1,2]
},
{
    id: 2,
    name: 'Tag2',
    assets: [1,3]
}];

Moustachioed HTML：

<body>
    <script type="text/x-handlebars" data-template-name="assets">
        {{view Ember.Select
            contentBinding="controller.tags.content"
            optionValuePath="content.id"
            optionLabelPath="content.name"
            valueBinding="selectedTag"
        }}

        <table>
            <tr>
                <td>"ID"</td>
                <td>"Name"</td>
            </tr>
            {{#each}}
            <tr>
                <td>{{id}}</td>
                <td>{{name}}</td>
            </tr>
            {{/each}}
        </table>
    </script>
</body>

Answer 1

在你Ember.Select你有contentBinding="controller.tags.content"你需要使用controllers ，而不是controller 。 因為需要，所以將引用的控制器添加到controllers屬性中。 在您的情況下，您needs: ['tags'] AssetsController中的needs: ['tags'] ，因此在資產模板中，您只需要使用controllers.tags來訪問該實例。

這是更新的選擇：

{{view Ember.Select
    contentBinding="controllers.tags.content"
    optionValuePath="content.id"
    optionLabelPath="content.name"
    valueBinding="selectedTag"
    prompt="Select a tag" 
}}

為了能夠過濾數據，您可以創建一個取決於selectedTag的計算屬性。 然后使用selectedTag值過濾內容。 如下所示：

App.AssetsController = Ember.ArrayController.extend({
  needs: ['tags'],
  selectedTag: null,
  assetsByTag: function() {      
      var selectedTag = this.get('selectedTag');
      var found = [];
      this.get('model').forEach(function(asset) {
          return asset.get('tags').forEach(function(tag) {
              if (tag.get('id') === selectedTag) {
                  found.pushObject(asset);
              }
          });
      });
      return found;
  }.property('selectedTag')
});

在模板中，您可以在每個助手中引用該屬性：

{{#each assetsByTag}}
    <tr>
        <td>{{id}}</td>
        <td>{{name}}</td>
    </tr>
{{/each}}

這是工作的小提琴http://jsfiddle.net/marciojunior/gqZj3/

在ember.js中訪問另一個模型數據

問題描述

1 個解決方案

解決方案1
1 已采納 2013-10-15 18:16:39

在ember.js中訪問另一個模型數據

問題描述

1 個解決方案

解決方案1 1 已采納 2013-10-15 18:16:39

解決方案1
1 已采納 2013-10-15 18:16:39