将数据传递到a帧中的组件时，有哪些最佳实践？

Question

I am quite new to a-frame but am really enjoying creating components and using them as primitives in HTML. In my current project I am creating an a-frame component that creates geometries given a set of vertices. I am creating the component in a generic way so that I can pass it different sets of vertices and create different shapes.

Although this is a specific problem, it speaks to a more general question of what is the suggested way to pass what could be quite big sets of data (objects, arrays) into a component. I would ideally like to be able to pass them from the html layer via a primitive. The amount of data will differ so I cannot hardcode a different property in the schema per item of data.

My current solution is that I have the data available as a global variable. I then pass the name of the variable as a string to the component and convert it to a variable name using window[variablename] . To be clear, this is working fine but I am curious to understand if there is a better way (or even just alternative approaches I might try).

Please find below an example of what I am doing;

Here are the bits of data I use in this example;

var exampleArraydata = [
    {
        "x":3,
        "y":3,
        "z":5
    },
    {
        "x":0,
        "y":15,
        "z":0
    },
    {
        "x":15,
        "y":0,
        "z":0
    }
]

var exampleObjectdata = {
    "x":3,
    "y":3,
    "z":5
}

Here is the example component;

AFRAME.registerComponent('examplecomponent', {

    schema: {        
        exampleArray: {type: 'string', default: 'foo'},
        exampleObject: {type: 'string', default: 'bar'},
    },

    init: function (){
       this.testArray = window[this.data.exampleArray]
       this.testObject = window[this.data.exampleObject]
       //logging just to check that it works
       console.log(this.testArray)
       console.log(this.testObject)
       //make geometry with these vec3s...
    }

});

Here is the primitive I create with that component;

AFRAME.registerPrimitive('a-example', {
  defaultComponents: {
    examplecomponent: {}
  },
  mappings: {
    array: 'examplecomponent.exampleArray',
    object: 'examplecomponent.exampleObject'
  }

});

And here is the custom html tag where I pass the variable name as an attribute;

<a-example
    array="exampleArraydata"
    object="exampleObjectdata">
</a-example>

Again, this does work so if people think that is a good approach then great, but I am new to this and if there are any issues with this I would really appreciate understanding what the issues are and ideally some alternative suggestions. For example, what if the objects were hosted at a URL rather than as a var in my own code?

Answer 1

You could also use your own custom parse function to read the data from the HTML attribute in particular way.

Here's an example from the docs: https://aframe.io/docs/0.7.0/core/component.html#custom-property-type

schema: {
  // Parse slash-delimited string to an array (e.g., `foo="myProperty: a/b"` to `['a', 'b']`).
  myProperty: {
    default: [],
    parse: function (value) {
      return value.split('/');
    }
  }
}

Answer 2

Polluting global namespace (window) can lead to problems - you can overwrite important variable one day and it will be difficult to track down, since it won't be undefined . The suggested way is to pass data via HTML attribute - as you figured out yourself.

Noam Almosnino pointed you in the right direction. You can parse the data however you want, if you want to pass an object into component, just parse its' strigified version:

<a-example objectData="{\"x\":3,\"y\":3,\"z\":5}"></a-example>

schema: {
  objectData: {
    default: {},
    parse: function (str) {
      return JSON.parse(str);
    }
  }
}