search

glimmerjs / glimmer-vm

MIT License
1.13k stars 190 forks source link

in-element component not found #722

Closed BryanCrotaz closed 6 years ago

BryanCrotaz commented 6 years ago

Trying to build a component with header, body and footer with complex internal structure for scrolling zones.

So at the end I have

{{yield hash(
  header=(component 'in-element' headerElement)
  body=(component 'in-element' bodyElement)
  footer=(component 'in-element' footerElement)
)}}

But I'm getting an error that in-element helper is not found. What addon do I need to add to get this in Ember 2.16.2?

rwjblue commented 6 years ago

in-element is not a component, it is a keyword

rwjblue commented 6 years ago

Also, in Ember it is not a public API (and is located at -in-element). One possible solution in your case (still using private API mind you) is:

{{! app/templates/components/render-in.hbs }}

{{#-in-element element}}
  {{yield}}
{{/-in-element}}

Then in the component you mentioned in your description you would do:

{{yield hash(
  header=(component 'render-in' element=headerElement)
  body=(component 'render-in' element=bodyElement)
  footer=(component 'render-in' element=footerElement)
)}}
BryanCrotaz commented 6 years ago

private API is much preferable to the broken ember-portal and wormhole :)

Out of interest what is a keyword in glimmer? Can't find any docs on keyword (you might consider renaming it as it's impossible to google for it - keep hitting metadata keywords instead).

BryanCrotaz commented 6 years ago

@rwjblue Tried it as you suggested but I get an error

I've added an if helper in the render-in component to only use the -in-element component if the element is truthy (e.g. before didInsertElement but that doesn't fix this.

Transition #0: TRANSITION COMPLETE.
view_support.js:90 Uncaught TypeError: Cannot read property 'getElement' of undefined
    at Class.get (view_support.js:90)
    at replaceObserversAndListeners (ember-metal.js:6542)
    at applyMixin (ember-metal.js:6600)
    at MixinPrototype.applyPartial (ember-metal.js:6859)
    at Function.proto (core_object.js:146)
    at validatePropertyInjections (inject.js:55)
    at Function.injectedPropertyAssertion [as _onLookup] (core_object.js:341)
    at Container.factoryFor (container.js:102)
    at Class.factoryFor (container_proxy.js:40)
    at Class.componentFor (component_lookup.js:9)
get @ view_support.js:90
replaceObserversAndListeners @ ember-metal.js:6542
applyMixin @ ember-metal.js:6600
MixinPrototype.applyPartial @ ember-metal.js:6859
proto @ core_object.js:146
validatePropertyInjections @ inject.js:55
injectedPropertyAssertion @ core_object.js:341
factoryFor @ container.js:102
factoryFor @ container_proxy.js:40
componentFor @ component_lookup.js:9
lookupComponentPair @ lookup-component.js:41
lookupComponent @ lookup-component.js:66
Environment._this._definitionCache._emberMetal.Cache.name @ environment.js:34
get @ ember-metal.js:2439
getComponentDefinition @ environment.js:144
compute @ component.js:57
value @ references.js:58
value @ dynamic-component.js:57
(anonymous) @ runtime.js:880
evaluate @ runtime.js:70
next @ runtime.js:7244
execute @ runtime.js:7230
handleException @ runtime.js:6629
handleException @ runtime.js:6822
_throw @ runtime.js:6508
evaluate @ runtime.js:934
execute @ runtime.js:6495
rerender @ runtime.js:6853
_this.render @ renderer.js:69
exports.runInTransaction @ ember-metal.js:652
_renderRoots @ renderer.js:341
_renderRootsTransaction @ renderer.js:379
_revalidate @ renderer.js:418
invoke @ backburner.js:274
flush @ backburner.js:153
flush @ backburner.js:345
end @ backburner.js:455
run @ backburner.js:539
join @ backburner.js:546
run.join @ ember-metal.js:4393
hash.success @ rest.js:614
fire @ jquery.js:3317
fireWith @ jquery.js:3447
done @ jquery.js:9272
(anonymous) @ jquery.js:9514
XMLHttpRequest.send (async)
send @ jquery.js:9566
ajax @ jquery.js:9173
_ajaxRequest @ rest.js:630
(anonymous) @ rest.js:626
initializePromise @ rsvp.js:453
Promise @ rsvp.js:919
ajax @ rest.js:609
findHasMany @ rest.js:425
_findHasMany @ -private.js:8723
findHasMany @ -private.js:11087
fetchLink @ -private.js:4611
findLink @ -private.js:3924
getRecords @ -private.js:4653
get @ -private.js:13014
ComputedPropertyPrototype.get @ ember-metal.js:3252
get @ ember-metal.js:2594
get @ observable.js:37
afterModel @ route.js:9
applyHook @ router.js:244
runSharedModelHook @ router.js:840
runAfterModelHook @ router.js:824
(anonymous) @ router.js:97
tryCatch @ rsvp.js:411
invokeCallback @ rsvp.js:424
publish @ rsvp.js:394
(anonymous) @ rsvp.js:14
invoke @ backburner.js:274
flush @ backburner.js:153
flush @ backburner.js:345
end @ backburner.js:455
run @ backburner.js:539
join @ backburner.js:546
run.join @ ember-metal.js:4393
hash.success @ rest.js:614
fire @ jquery.js:3317
fireWith @ jquery.js:3447
done @ jquery.js:9272
(anonymous) @ jquery.js:9514
XMLHttpRequest.send (async)
send @ jquery.js:9566
ajax @ jquery.js:9173
_ajaxRequest @ rest.js:630
(anonymous) @ rest.js:626
initializePromise @ rsvp.js:453
Promise @ rsvp.js:919
ajax @ rest.js:609
findAll @ rest.js:359
_findAll @ -private.js:8768
_fetchAll @ -private.js:11464
findAll @ -private.js:11432
model @ route.js:14
deserialize @ route.js:947
applyHook @ router.js:244
runSharedModelHook @ router.js:840
getModel @ router.js:1038
(anonymous) @ router.js:97
tryCatch @ rsvp.js:411
invokeCallback @ rsvp.js:424
publish @ rsvp.js:394
(anonymous) @ rsvp.js:14
invoke @ backburner.js:274
flush @ backburner.js:153
flush @ backburner.js:345
end @ backburner.js:455
run @ backburner.js:539
join @ backburner.js:546
run.join @ ember-metal.js:4393
hash.success @ rest.js:614
fire @ jquery.js:3317
fireWith @ jquery.js:3447
done @ jquery.js:9272
(anonymous) @ jquery.js:9514
XMLHttpRequest.send (async)
send @ jquery.js:9566
ajax @ jquery.js:9173
_ajaxRequest @ rest.js:630
(anonymous) @ rest.js:626
initializePromise @ rsvp.js:453
Promise @ rsvp.js:919
ajax @ rest.js:609
findRecord @ rest.js:338
_find @ -private.js:8670
_fetchRecord @ -private.js:10720
_fetchRecord @ -private.js:10781
_flushPendingFetchForType @ -private.js:10881
cb @ ember-metal.js:5470
forEach @ ember-metal.js:5277
forEach @ ember-metal.js:5478
flushAllPendingFetches @ -private.js:10762
invoke @ backburner.js:274
flush @ backburner.js:153
flush @ backburner.js:345
end @ backburner.js:455
run @ backburner.js:539
join @ backburner.js:546
run.join @ ember-metal.js:4393
hash.success @ rest.js:614
fire @ jquery.js:3317
fireWith @ jquery.js:3447
done @ jquery.js:9272
(anonymous) @ jquery.js:9514
XMLHttpRequest.send (async)
send @ jquery.js:9566
ajax @ jquery.js:9173
_ajaxRequest @ rest.js:630
(anonymous) @ rest.js:626
initializePromise @ rsvp.js:453
Promise @ rsvp.js:919
ajax @ rest.js:609
findRecord @ rest.js:338
_find @ -private.js:8670
_fetchRecord @ -private.js:10720
_fetchRecord @ -private.js:10781
_flushPendingFetchForType @ -private.js:10881
cb @ ember-metal.js:5470
forEach @ ember-metal.js:5277
forEach @ ember-metal.js:5478
flushAllPendingFetches @ -private.js:10762
invoke @ backburner.js:274
flush @ backburner.js:153
flush @ backburner.js:345
end @ backburner.js:455
run @ backburner.js:539
join @ backburner.js:546
run.join @ ember-metal.js:4393
(anonymous) @ ember-metal.js:4467
mightThrow @ jquery.js:3583
process @ jquery.js:3651
setTimeout (async)
(anonymous) @ jquery.js:3689
fire @ jquery.js:3317
fireWith @ jquery.js:3447
fire @ jquery.js:3455
fire @ jquery.js:3317
fireWith @ jquery.js:3447
ready @ jquery.js:3920
completed @ jquery.js:3930