Ember - 根據陣列中的值通過不同的模板渲染產品

我爲此問題簡化了我的應用程序。我確信，我剛剛開始對Ember有所瞭解，而且我還沒有像現在這樣有效地做事。Ember - 根據陣列中的值通過不同的模板渲染產品

我正在尋找一種方法來爲具有某些特徵的條目使用不同的模板。讓我來解釋：

我有一個嵌套的路線如下：

App.Router.map(function(){ 
    this.resource('products', function() { 
     this.resource('product', { path: '/:product_id' }); 
    }); 
});

和這樣的JSON文件：

{"product": [ 
    { 
     "id": 1, 
     "title": "Bicycle", 
     "description": "A nice red bicycle that you can ride on.", 
     "display": "textonly" 
    }, 
    { 
     "id": 2, 
     "title": "Bus", 
     "description": "A big bus that many people can ride on." 
     "display": "bigblocks" 
    }, 
    { 
     "id": 3, 
     "title": "Airplane", 
     "description": "You can fly in this to get to your destination faster", 
     "display": "textonly" 
    } 
    ] 
}

正如你可以看到，我添加了一個屬性，我的JSON這決定了應該如何顯示產品條目。

現在，我的HTML模板看起來是這樣的：

<script type='text/x-handlebars' data-template-name='products'> 
     <div class='row'> 
     <div class='col-md-3'> 
      <div class='list-group'> 
       {{#each}} 
        {{#link-to 'product' this classNames='list-group-item'}} 
         {{title}} 
        {{/link-to}} 
       {{/each}} 
      </div> 
     </div> 
     <div class='col-sm-9'> 
      {{outlet}} 
     </div> 
     </div> 
</script> 

<script type='text/x-handlebars' data-template-name='product'> 
    <div class ='row'> 
     <div class ='col-md-9'> 
      <h4>{{title}}</h4> 
      <p>{{description}}</p> 
     </div> 
    </div> 
</script>

我的應用程序目前呈現這樣的：

enter image description here

現在，我想要做的，是通過不同的模板（或視圖或組件或任何最適合該工作）渲染某些產品，以便當"display": "bigblocks"產品呈現略有不同比當"display": "textonly"，像這樣：

enter image description here

因此，實際上，我想有很多JSON條目，並基於JSON文件的「顯示」價值不同使它們。

我只是在尋找一個非常簡單的方法來做到這一點，也許是一個IF語句或類似的東西，只是這樣我才能得到我的頭如何做到這一點。

非常感謝，如果需要的話，並請詢問更多的信息:)

來源

2015-01-02 user1525612

你可以完成你想要使用你的模板內的控制器上的計算性能和條件邏輯。

包括以下計算屬性對您的產品控制器：

isDisplayTextOnly: function(){ 
    return this.get('display') === 'textonly'; 
}.property('model.display')

添加條件邏輯產品模板，使其在取決於控制器計算出的值不同的格式顯示：

{{#if isDisplayTextOnly}} 
    <!-- What you want displayed when "display" == "textonly" --> 
{{else}} 
    <!-- What you want displayed when "display" == "bigblocks" or anything else --> 
{{/if}}

來源

2015-01-04 05:22:29

組件允許您指定templateName。所以，你可以根據display屬性的值計算模板名稱如下：

App.XDisplayComponent = Ember.Component.extend({ 
    tagName: "", 
    templateName: function(){ 
    return this.get('item.display'); 
    }.property('item'), 
});

你會按如下方式使用組件：

<script type="text/x-handlebars" data-template-name="index"> 
    <ul> 
     {{#each item in model}} 
     <li>{{item.name}} {{ x-display item=item}} </li> 
     {{/each}} 
    </ul> 
    </script>

看到一個工作演示here

來源

2015-01-04 06:53:39 Kalman

謝謝，我實際上結束了這個方法，但奧倫也工作:) – user1525612

Ember - 根據陣列中的值通過不同的模板渲染產品

回答

相關問題