我正在完成编写一个 javascript 组件,我想提供一堆示例来说明配置属性、事件、方法等......
我目前有以下 HTML 来记录单个属性:
<div class="conf">
<div class="opt-name">allowFreeEntries</div>
<code>boolean</code>
<div style="clear:both;"></div>
<div class="opt-desc">Restricts or allows the user to validate typed entries.<br/>Defaults to <em>true</em>
<a class="opt-ex">View an example</a>
<span class="hidden">{"allowFreeEntries": false}</span>
</div>
</div>
单击“查看示例”链接时,我会弹出另一个 div,其中包含我的组件,其默认配置与隐藏跨度中给出的自定义配置混合在一起:
$('.conf .opt-ex').click(function(){
var raw = $(this).next().html();
var rawCfg = JSON.parse(raw);
var exId = 'example-' + $('div[id^="example-"]').length + 1;
var cfg = $.extend({
renderTo: $('#' + exId),
width: 590
}, rawCfg);
$('<div/>',{id: exId}).insertBefore(this);
new MyComponent(cfg);
});
这一切都很顺利......这是棘手的部分。我想将完整的评估代码输出为组件上方的原始 HTML。我想向用户显示的是:
<code><pre>
new MagicSuggest({
renderTo: $('#example-1'),
width: 590,
allowFreeEntries: false
});
</pre></code>
我做了一些实验,但它们都显得笨拙。有什么建议么?
非常感谢!