Ember handlebars顯示對象的鍵

在實(shí)際的開發(fā)過程中你很有可能需要顯示出對象數(shù)組的鍵或者值，如果你需要同時(shí)顯示出對象的鍵和值你可以使用{{#each-in}}標(biāo)簽。
注意：each-in標(biāo)簽是Ember 2.0才有的功能，之前的版本是無法使用這個(gè)標(biāo)簽的，如果是2.0一下的版本會(huì)報(bào)錯(cuò)：Uncaught Error: Assertion Failed: A helper named 'each-in' coulad not be found
準(zhǔn)備工作：使用Ember CLI生成一個(gè)component，與此同時(shí)會(huì)生成一個(gè)對應(yīng)的模板文件。
ember generate component store-categories
執(zhí)行上述命令得到下面的3個(gè)文件：

app/components/store-categories.js
app/templates/components/store-categories.hbs
tests/integration/components/store-categories-test.js

然后在app/router.js增加一個(gè)路由設(shè)置，在map方法里添加this.route('store-categories');；此時(shí)可以直接訪問http://localhost:4200/store-categories;

http://guides.emberjs.com/v2.0.0/templates/displaying-the-keys-in-an-object/

在組件中增加測試數(shù)據(jù)

// app/components/store-categories.js
import Ember from 'ember';


export default Ember.Component.extend({
    // https://guides.emberjs.com/v2.4.0/components/the-component-lifecycle/
    willRender: function() {
        //  設(shè)置一個(gè)對象到屬性“categories”上，并且設(shè)置到categories屬性上的對象結(jié)構(gòu)是：key為字符串，value為數(shù)組
        this.set('categories', {
          'Bourbons': ['Bulleit', 'Four Roses', 'Woodford Reserve'],
          'Ryes': ['WhistlePig', 'High West']
        });
    }
));

willRender方法在組件渲染的時(shí)候執(zhí)行，更多有關(guān)組件的介紹會(huì)在后面章節(jié)——組件中介紹，想了解更多有關(guān)組件的介紹會(huì)在后面的文章中一一介紹，目前你暫且把組件當(dāng)做是一個(gè)提取出來的公共HTML代碼。

有了測試數(shù)據(jù)之后我們怎么去使用each-in標(biāo)簽遍歷出數(shù)組的鍵呢？

<ul>
  {{#each-in categories as |category products|}}
    <li>{{category}}
      <ol>
        {{#each products as |product|}}
          <li>{{product}}</li>
        {{/each}}
      </ol>
    </li>
  {{/each-in}}
</ul>

上述模板代碼中第一個(gè)位置參數(shù)category就是迭代器的鍵，第二個(gè)位置參數(shù)product就是鍵所對應(yīng)的值。

為了顯示效果，在application.hbs中調(diào)用這個(gè)組件，組件的調(diào)用非常簡單，直接使用{{組件名}}方式調(diào)用。

{{store-categories}}

渲染后結(jié)果如下圖：

重渲染

{{each-in}}表達(dá)式不會(huì)根據(jù)屬性值變化而自動(dòng)更新。上述示例中，如果你給屬性categories增加一個(gè)元素值，模板上顯示的數(shù)據(jù)不會(huì)自動(dòng)更新。為了演示這個(gè)特性在組件中增加一個(gè)觸發(fā)屬性變化的按鈕，首先需要在組件類app/components/store-categories.js中增加一個(gè)action方法（有關(guān)action會(huì)在后面的章節(jié)介紹，暫時(shí)把他看做是一個(gè)普通的js函數(shù)），然后在app/templates/components/store-categories.hbs中增加一個(gè)觸發(fā)的按鈕。

import Ember from 'ember';


export default Ember.Component.extend({
    // willRender方法在組件渲染的時(shí)候執(zhí)行，更多有關(guān)組件的介紹會(huì)在后面章節(jié)——組件，中介紹
    willRender: function() {
        //  設(shè)置一個(gè)對象到屬性“categories”上，并且設(shè)置到categories屬性上的對象結(jié)構(gòu)是：key為字符串，value為數(shù)組
        this.set('categories', {
          'Bourbons': ['Bulleit', 'Four Roses', 'Woodford Reserve'],
          'Ryes': ['WhistlePig', 'High West']
        });
    },
    actions: {
        addCategory: function(category) {
            console.log('清空數(shù)據(jù)');
            let categories = this.get('categories');
            // console.log(categories);
            categories['Bourbons'] = [];
            //  手動(dòng)執(zhí)行重渲染方法更新dom元素，但是并沒有達(dá)到預(yù)期效果
            // 還不知道是什么原因
            this.rerender();
        }
    }
});

<ul>
  {{#each-in categories as |category products|}}
    <li>{{category}}
      <ol>
        {{#each products as |product|}}
          <li>{{product}}</li>
        {{/each}}
      </ol>
    </li>
  {{/each-in}}
</ul>


<button onclick={{action 'addCategory'}}>點(diǎn)擊清空數(shù)據(jù)</button>

但是很遺憾，即使是手動(dòng)調(diào)用了rerender方法也沒辦法觸發(fā)重渲染，界面顯示的數(shù)據(jù)并沒有發(fā)生變化。后續(xù)找到原因后再補(bǔ)上??！

空數(shù)組處理

空數(shù)組處理與表達(dá)式{{each}}一樣，同樣是判斷屬性不是null、undefined、[]就顯示出數(shù)據(jù)，否則執(zhí)行else部分。

{{#each-in people as |name person|}}
  Hello, {{name}}! You are {{person.age}} years old.
{{else}}
  Sorry, nobody is here.
{{/each-in}}

可以參考上一篇的{{each}}標(biāo)簽測試，這里不再贅述。
博文完整代碼放在Github（博文經(jīng)過多次修改，博文上的代碼與github代碼可能又出入，不過影響不大?。?，如果你覺得博文對你有點(diǎn)用，請?jiān)趃ithub項(xiàng)目上給我點(diǎn)個(gè)star吧。您的肯定對我來說是最大的動(dòng)力！！