本文整理汇总了TypeScript中glimmer-test-helpers.TestEnvironment.registerEmberishGlimmerComponent方法的典型用法代码示例。如果您正苦于以下问题：TypeScript TestEnvironment.registerEmberishGlimmerComponent方法的具体用法？TypeScript TestEnvironment.registerEmberishGlimmerComponent怎么用？TypeScript TestEnvironment.registerEmberishGlimmerComponent使用的例子？那么恭喜您, 这里精选的方法代码示例或许可以为您提供帮助。您也可以进一步了解该方法所在类glimmer-test-helpers.TestEnvironment的用法示例。
在下文中一共展示了TestEnvironment.registerEmberishGlimmerComponent方法的2个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: renderContent
function renderContent() {
let data = JSON.parse($data.value);
let env = new TestEnvironment();
env.registerEmberishGlimmerComponent("h-card", null, $layout.value);
let app = env.compile($template.value);
function compileLayout(component) {
let definition = env.getComponentDefinition([component]);
let compiled = layoutFor(definition, env);
let children = definition['compileLayout'](env).children;
// Fake a Block
return { compiled, children, compile() {} };
}
function compileInner(block) {
block.compile(env);
block.children.forEach(compileInner);
}
function processOpcodes(block) {
compileInner(block);
return {
opcodes: block.compiled.ops.toArray().map(op => op.toJSON()),
children: block.children.map(processOpcodes)
};
}
function processUpdatingOpcodes(list) {
return res['updating'].toArray().map(op => op.toJSON());
}
let div = document.createElement('div');
env.begin();
let self = new UpdatableReference(data);
let res = app.render(self, env, { appendTo: div, dynamicScope: new TestDynamicScope(null) });
env.commit();
ui.rendered = true;
ui.template.source = $template.value;
ui.template.wireFormat = JSON.parse(compileSpec($template.value, {}));
ui.template.opcodes = processOpcodes(app.raw);
ui.layout.source = $layout.value;
ui.layout.wireFormat = JSON.parse(compileSpec($layout.value, {}));
ui.layout.opcodes = processOpcodes(compileLayout("h-card"));
ui.updatingOpcodes = processUpdatingOpcodes(res['updating']);
ui.html = div.innerHTML;
window['$UI'] = ui;
window['$DIV'] = div;
_updateContent = () => {
self.update(JSON.parse($data.value));
res.rerender();
ui.updatingOpcodes = processUpdatingOpcodes(res['updating']);
ui.html = div.innerHTML;
rerenderUI();
};
rerenderUI();
}示例2: renderUI
function renderUI() {
let env = new TestEnvironment();
env.registerHelper("json", ([value]) => JSON.stringify(value));
env.registerEmberishGlimmerComponent("wire-format-inspector", null,
`<div>
<h3>Statements</h3>
<ol>
{{#each @spec.statements key="@index" as |statement|}}
<li><span class="pre">{{json statement}}</span></li>
{{/each}}
</ol>
<hr />
{{#if @spec.locals}}
<h3>Locals</h3>
<ol>
{{#each @spec.locals key="@index" as |local|}}
<li><span class="pre">{{json local}}</span></li>
{{/each}}
</ol>
<hr />
{{/if}}
{{#if @spec.named}}
<h3>Named</h3>
<ol>
{{#each @spec.named key="@index" as |name|}}
<li><span class="pre">{{json name}}</span></li>
{{/each}}
</ol>
<hr />
{{/if}}
{{#if @spec.yields}}
<h3>Yields</h3>
<ol>
{{#each @spec.yields key="@index" as |yield|}}
<li><span class="pre">{{json yield}}</span></li>
{{/each}}
</ol>
<hr />
{{/if}}
{{#if @spec.blocks}}
<h3>Blocks</h3>
<ol>
{{#each @spec.blocks key="@index" as |block|}}
<li>
<h3>Block</h3>
{{wire-format-inspector spec=block}}
</li>
{{/each}}
</ol>
{{/if}}
</div>`);
env.registerHelper("pp-opcode", ([opcode]) => {
let output = opcode.type.toUpperCase();
if (opcode.args || opcode.details) {
output += "(";
if (opcode.args && opcode.args.length) {
output += opcode.args.join(", ");
}
if (opcode.details) {
let keys = Object.keys(opcode.details);
if (keys.length) {
if (opcode.args && opcode.args.length) {
output += ", ";
}
output += keys.map(key => `${key}=${opcode.details[key]}`).join(", ");;
}
}
output += ")";
}
return output;
});
env.registerEmberishGlimmerComponent("opcode-inspector", null,
`<li>
<span class="pre">{{pp-opcode @opcode}}</span>
{{#if @opcode.children}}
<ol>
{{#each @opcode.children key="guid" as |opcode|}}
{{opcode-inspector opcode=opcode}}
{{/each}}
</ol>
{{/if}}
</li>`);
env.registerEmberishGlimmerComponent("block-inspector", null,
`<div>
<h3>Opcodes</h3>
<ol>
{{#each @block.opcodes key="guid" as |opcode|}}
<opcode-inspector opcode={{opcode}} />
//.........这里部分代码省略.........