Cannot use SCF.addComponent manually

Avatar

Avatar

jamiec4451712

Avatar

jamiec4451712

jamiec4451712

13-02-2017

Hey everyone,

I'm working on some pretty heavy SCF extensions and have come across an error that looks like it's code that was refactored incompletely. When the SCF loads, the fullBootstrap method is called, which in turn adds the views and models to each component using the two functions addView and addModel. This works fine when the page is rendered normally. I am trying to dynamically inject components into modals when elements are clicked. Due to the specific nature of this problem, I am trying to write my own code to properly introduce a new component to the SCF ecosystem. After some digging through source code, I came across this window-bound function:

SCF.addComponent = function(el) { var $el = $(el); if ($el.length === 0) { throw "Could not find requested element on page."; } var component = extractComponentFromElement($el); if (component === null) { throw "Component is already loaded."; } if (!component.id) { throw "Component does not have a data-component-id attribute, which is required"; } if (!component.type) { throw "Component does not have a data-scf-component attribute, which is required."; } return createComponent(component.id, component.type, component.template, component.el); };

 

So great! I can use this to add my component if I load the resource directly as HTML. It works fine, but there is an error occurring due to a variable being undefined. I traced the problem to this helper method:

var createComponent = function(id, type, template, $el) { // Find the json model on the page. var modelHolder = $CQ("script[type='application/json'][id='" + id + "']"); var component = { id: id, type: type, template: template, modelHolder: modelHolder, el: $el }; // model is the undefined variable var model = addModel(component); var view = addView(component); return SCF.addLoadedComponent(type, model, view); };

Basically, when model and view are passed into SCF.addLoadedComponent, they are both undefined - and rightfully so - both addModel and addView have no return statements. They both simply modify the component being passed in. In other instances, addView and addModel are called, and then the component.type and component.model are passed in to the next method, as so:

SCF.addLoadedComponent(component.type, component.model, component.view);

I believe this should also be the case in createComponent. I guess this is code that simply isn't used, but there's no theoretical way for model and view to be defined here. I believe this to be an issue during a refactor process that was overlooked. The problem is, due to the design of the code, this method is quite a beast to override and implement myself. I would like to get some input on this before I proceed. Am I missing something? Is there a hotfix for this?

View Entire Topic

Avatar

Avatar

jamiec4451712

Avatar

jamiec4451712

jamiec4451712

13-02-2017

To follow up here, if I attempt to pass in component.model and component.view directly, the entire page breaks (like, browser crashes). However, if I simply return the model and view in addView and addModel, the error is gone and all works as expected.