0

I have a script that is like this:

<div id="foo"></div>
<script>
var foo;
bar()
function bar() {
    var config = {
        a: "foo",
        b: "string",
        otherConfig1: ...
        otherConfig2: ...
        ...
    }
    
    foo = new NeoVis.default(config)
    foo.render();
    console.log(foo);
}
</script>

I want to have 8 more pieces of this, with different foo, bar and string. The otherConfigs are unchanged. I can simply duplicate them, but since the otherConfigs are very long, I would like to do this smarter. I have read about constructor, but since the function doesn't have any argument, I don't know how to apply this. I also try to move the config object outside of the function, but it seems that the code wouldn't run.

Neovis is a library. I also ask this on Neovis's Github: How to have multiple divs with different initial Cypher query?

Ooker
  • 1,969
  • 4
  • 28
  • 58
  • maybe you could have a `otherConfigs` variable and then apply that using the `...` operator in all the declarations you require. – tsamridh86 Jan 02 '22 at 09:59
  • what is the `...` operator? Surely it's not the ellipsis that I use to simply say there is more values in the object, right? – Ooker Jan 02 '22 at 10:05
  • 1
    https://stackoverflow.com/questions/48464211/javascript-property-with-three-dots – Quentin Jan 02 '22 at 10:15
  • Moving `config` outside the function shouldn't be a problem. – Keith Jan 02 '22 at 10:46

1 Answers1

1

You could implement a function to which you pass the id, func, string as parameters to generate a function into the context you prefer (probably window). I have implemented a dummy NeoVis for the sake of the test, you will need to use yours instead.

var NeoVis = {
    default: function(config) {
        this.render = function() {};
    }
};

function myfunction(context, id, func, str) {
    context[id] = undefined;
    return context[func] = function() {
        var config = {
            a: id,
            b: str,
            //otherConfigs...
        };
        
        context[id] = new NeoVis.default(config);
        context[id].render();
        console.log(`function ${func} was called and ${id} is the id`);
    };
}

for (let item of document.querySelectorAll("#foo, #lorem, #dolor")) {
    myfunction(window, item.id, item.getAttribute("data-function"), item.innerText)();
}
<div id="foo" data-function="bar">string1</div>
<div id="lorem" data-function="ipsum">string2</div>
<div id="dolor" data-function="es">string3</div>

enter image description here

Lajos Arpad
  • 64,414
  • 37
  • 100
  • 175
  • it doesn't seem to work. It just prints the strings, and there is nothing in the log. Can you tell more about how to implement the proper `Neovis`? If your dummy one is based on `foo = new NeoVis.default(config); foo.render();`, then I think it should work? – Ooker Jan 02 '22 at 10:53
  • @Ooker I have edited my answer by adding a picture that shows that stuff is logged. I have no information whatsoever about the `NeoVis` you are using. It's probably a library, but since no information was provided about it, I have implemented a dummy version of it so we can test the templating I have implemented. Please run the snippet above and take a look at the logs. You should have something similar to the image I have shared in my answer. – Lajos Arpad Jan 02 '22 at 11:05
  • 1
    Ah I see. So if the library has already handled `NeoVis`, then I don't need to declare it again. I try to remove that dummy on your code, and.. it's only work in JSFiddle, but not in my local machine. I open a new question to solve this, hope to see you there: [Why does the same code run at some places and not in others?](https://stackoverflow.com/q/70558494/3416774) – Ooker Jan 02 '22 at 18:09
  • 1
    @Ooker exactly. The dummy implementation of resources is the exact technique of unit tests. We do not actually care about the correctness of `NeoVis` when we are to test the logic that generates the resources that are using it, for the problem-space of this issue we are agnostic about `NeoVis`, while, in the actual site we do care about making sure it works properly. – Lajos Arpad Jan 03 '22 at 12:24