Multiple ace editors in one template fails loading

[rsercano]

Hello,

first of all, thanks for the work, but I need to initialize ace editors synchronously in my project, otherwise it doesn't load the second ace editor at all.

How can I achieve this ?

Edit: The main point of this issue is in the below comments, please read them first

Thanks

[rsercano]

The main problem is, when I load two templates which have Aceeditor.instance command on their onRendered function, one of them is not loading ace editor, callback of Aceeditor.instance is never being called.

[rsercano]

Oh, tracker autorun worked for me !

Tracker.autorun(function (e) {
        var editor = AceEditor.instance(id, {
            mode: "javascript",
            theme: 'dawn'
        });
        if (editor.loaded !== undefined) {
            e.stop();
            editor.setOptions({
                fontSize: "11pt",
                showPrintMargin: false
            });
        }
    });

[archywillhe]

Glad to learn that you managed to find a solution yourself. :+1:

But were you saying that writing

AceEditor.instance(id,null,function(editor){
editor.setOptions({
fontSize: "11pt",
showPrintMargin: false
});
});

in two templates only result in 1 callback being called? That's not a normal behavior though. Something is off. Did you forget to have editor as a argument of the function? Normally it should just work this way without auto-tracking. Auto-tracking here is more for assigning a variable to the aceEditor (if the line var a = AceEditor.instance(id); is evaluated when the ace script is not loaded, AceEditor.instance(id) would not be able to return an instance of ace editor).

[archywillhe]

If you just want do it synchronously, you don't need to use this package. Just add a <script> tag to get the script in your meteor app would do.

[rsercano]

Thanks for your comments, but yes it didn't work while using AceEditor.instance(id,null,function(editor){}

Here are the list of things which I do:

• Create a new template templateA
• Create a new template templateB
• Create a new template templateC which includes templateA and templateB
• onRendered of templateA initialize aceeditor with your asynchronus way.
• onRendered of templateB initialize aceeditor with your asynchronus way.

Result:

• Only templateA shows the aceeditor which means only templateA reached the callback of your .instance method

Thanks & Regards

[rsercano]

I would like to try your package, because I didn't want to add a script tag, since I think reading templates are getting harder with all<script> tag imports. Also my main point was, there was an error while loading two ace editors in one template, therefore I've changed the title of issue.

[archywillhe]

Ooh. Thanks! I think I know what's going on now. Just one more question: is there any error/exception in the console? If there isn't any, in your old code (the one that didn't work), can you put console.log(arguments[0].container) in both of the ace initialization's callbacks in templateA and templateB, and let me know if you saw the same log of some div (which is the DOM object for one of the editors) twice in the console?

If I am not wrong, both of the callbacks were triggered: it was just that there is a flaw in my use of the singleton pattern and when you does AceEditor.instance twice in a short interval before the script is successfully loaded, the callbacks end up taking the same instance of the editor as the first argument, and having it doing . setOptions and stuff twice.

[archywillhe]

will get it fixed in these few days. Thanks for the bug report once again!

[rsercano]

I guess you are right on your assumption, but unfortunately I'm not able to try it soon, whenever I get time I will try it for you. And I've put a console.log('BLABLA'); at the end of the callback function, but it didn't reach there for the templateB, but templateA