將「控件」添加到加工者的UI工具包中

Question

我在編寫風格指南，使用Fabricator和the docs似乎表明我應該能夠添加「控件」以讓用戶在各個部分上切換可見性。

默認情況下，Fabricator版本帶有3個主切換：labels,notes和code。我想添加第4個切換，我打電話給styles。

的fabricator.js文件看起來像這樣的相關章節：

/** 
* Default options 
* @type {Object} 
*/ 
fabricator.options = { 
    toggles: { 
    labels: true, 
    notes: true, 
    code: false, 
    styles: true, 
    }, 
    menu: true, 
    mq: '(min-width: 60em)', 
}; 

&

/** 
* Handler for preview and code toggles 
* @return {Object} fabricator 
*/ 
fabricator.allItemsToggles =() => { 

    const itemCache = { 
    labels: document.querySelectorAll('[data-f-toggle="labels"]'), 
    notes: document.querySelectorAll('[data-f-toggle="notes"]'), 
    code: document.querySelectorAll('[data-f-toggle="code"]'), 
    styles: document.querySelectorAll('[data-f-toggle="styles"]'), 
    }; 
} 

正如你所看到的，我已經添加了我的styles切換到fabricator.options對象和對itemCache對象與現有元素的格式匹配。

我還添加了新的styles部分的控件和內容諧音：

f-item-controls.html

{{!-- this is part of the default build --}} 
{{#if notes}} 
<span class="f-control f-icon" data-f-toggle-control="notes" title="Toggle Notes"> 
    <svg> 
     <use xlink:href="#f-icon-notes" /> 
    </svg> 
</span> 
{{/if}} 

{{!-- this is my matching addition --}} 
{{#if styles}} 
<span class="f-control f-icon" data-f-toggle-control="styles" title="Toggle Styles"> 
    <svg> 
     <use xlink:href="#f-icon-styles" /> 
    </svg> 
</span> 
{{/if}} 

f-item-content.html

{{!-- this is part of the default build --}} 
{{#if notes}} 
<div class="f-item-notes" data-f-toggle="notes"> 
    {{{notes}}} 
</div> 
{{/if}} 

{{!-- this is my matching addition --}}  
{{#if styles}} 
<div class="f-item-styles" data-f-toggle="styles"> 
    {{{styles}}} 
</div> 
{{/if}} 

最後，只是讓我有內容的工作，我添加了一些我的按鈕組件可以呈現的'前端'數據：

--- 
notes: | 
    These are notes written in `markdown` 
styles: | 
    These are styles written in `markdown` 
--- 

notes（默認構建的一部分）呈現並正確切換; styles根本不渲染。如果刪除styles塊的{{#if}}條件，則會生成control圖標和相應的content<div>，但實際的style文本仍然丟失。

我已經與Luke Askew（製造者的創造者）聯繫，要求澄清，但我還沒有收到他的回覆。與此同時，我希望SO社區中的某個人能夠幫助我理解這是如何工作的，以便我可以繼續我的工作。

Answer 1

更新

筆者（@lukeaskew）迴應我的電子郵件查詢，並表示所有的「前事」的數據被打包成data（如訪問或{{data}}{{{data}}}），以及訪問或檢查'我最初嘗試添加的樣式數據，我可以在我的f項目內容& f-item-controls文件中輸入{{{data.styles}}}。

如果由於某種原因您不適用於您，或者您想要一個真正獨立的數據部分，那麼您可以按照我在下面列出的說明進行操作。

原來的答案身體

我想出如何添加control（內容切換）到加工廠 - 希望這將幫助別人。對於初學者，我並不確定，但我懷疑styles（我給我的自定義控件的名稱）可能是保留字，因爲在fabricator.js文件中定期會導致gulp任務停止運行/失敗。不幸的是，（截至本文發佈），docs仍然沒有任何跡象表明除保留字以外，保留字是什麼。

要添加control，除了我的問題中指出的步驟外，還需要修改組裝src文件夾的網站node_module。

該文件位於您的Fabricator文件夾中，位於node_modules/fabricator-assemble/index.js，您需要修改以下部分（LINE〜332），用新控件的名稱替換「NEW_TOGGLE_NAME」（與您在部分中提及的名稱相同在我的問題中）：

// capture meta data for the material 
if (!isSubCollection) { 
    assembly.materials[collection].items[key] = { 
    name: toTitleCase(id), 
    notes: (fileMatter.data.notes) ? md.render(fileMatter.data.notes) : '', 

    NEW_TOGGLE_NAME: (fileMatter.data.NEW_TOGGLE_NAME) ? md.render(fileMatter.data.NEW_TOGGLE_NAME) : '', 

    data: localData 
    }; 
} else { 
    assembly.materials[parent].items[collection].items[key] = { 
    name: toTitleCase(id.split('.')[1]), 
    notes: (fileMatter.data.notes) ? md.render(fileMatter.data.notes) : '', 

    NEW_TOGGLE_NAME: (fileMatter.data.NEW_TOGGLE_NAME) ? md.render(fileMatter.data.NEW_TOGGLE_NAME) : '', 

    data: localData 
    }; 
}