将“控件”添加到加工者的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 
    }; 
}