2017-05-23 80 views
1

我正在處理帶有handlebar,patternlab-node和gulp的項目。現在我的.hbs文件不工作,如果我嘗試將參數傳遞給原子部分。我在下面列出了一個例子。Patternlab Handlebars以字符串文字形式傳遞數據變量

分子:

<div class="filter-group {{ filterGroupClass }}"> 
    {{#each filterGroupContent}} 
    {{> atoms-filter filterClass="{{filterClass}}" filterText="{{filterText}}" filterValue="{{filterValue}}" }} 
    {{/each}} 
</div> 

數據:

{ 
    "filterGroupClass": "test-class", 
    "filterGroupContent": [ 
    { 
     "filterClass": "", 
     "filterText": "Text", 
     "filterValue": "9" 
    }, 
    { 
     "filterClass": "closed", 
     "filterText": "Text2", 
     "filterValue": "9" 
    } 
    ] 
} 

的原子:

<span class="unit"> 
    <a class="filter {{filterClass}}" href="">{{filterText}} 
    <span class="value">{{filterValue}}</span> 
    </a> 
    <a class="pill-filter-close" href="">Close</a> 
</span> 

輸出現在被示出與該文本爲:{{filterText}} {{filterValue}}代替文本來自json數據。但它從循環顯示正確的次數,所以我相信它是從json文件獲取信息。

我不確定這是一個語法錯誤還是不同的問題,但任何幫助表示讚賞。

回答

1

原來我錯誤地使用了模式參數(根據Brian aka @bmuenzenmeyer誰幫我在patternlab gitter),參數應該被認爲是!important。數據可以默認傳遞給嵌套的孩子,所以當我重命名我的JSON文件中的鍵時,它可以正常工作。

下面

更新JSON:

{ 
    "filterGroupClass": "group-div-class", 
    "filterGroupContent": [ 
    { 
     "filterClass": "", 
     "filterText": "Text", 
     "filterValue": "9" 
    }, 
    { 
     "filterClass": "", 
     "filterText": "Text2", 
     "filterValue": "9" 
    } 
    ] 
} 

,因爲你可以從我的問題關鍵看名字是什麼如圖所示的原子被期待作爲變量值這允許參數自動設置我的分子模板傳遞下面。

<div class="filter-group {{ filterGroupClass }}"> 
    {{#each filterGroupContent}} 
    {{> atoms-filter }} 
    {{/each}} 
</div> 
+0

很高興我能幫忙! –