J'essaie de générer dynamiquement une div basée sur les propriétés d'un objet fabric.canvas.object.génération html dynamique en polymère
Ci-dessous des extraits de mon code.
class Polymer2FabricEdit extends Polymer.Element {
static get is() { return 'polymer-2-fabric-edit' }
static get config() {
return {
properties: {
canvas: {
type: Object,
value: null
},
ctx: {
type: Object,
value: null
},
canvasWidth: {
type: Number,
value: 300
},
canvasHeight: {
type: Number,
value: 300
},
topProperty: {
type: Number,
value: 0,
notify: true
},
observers: [
]
}
}
constructor() {
super();
console.log('created');
}
connectedCallback() {
super.connectedCallback();
console.log('attached');
}
ready() {
super.ready();
this.canvas = new fabric.Canvas(this.$.c, {isDrawingMode: false});
console.log(this.canvas);
this.ctx = this.canvas.getContext('2d');
this.addEventListener('click', (e)=>this.handleClick(e));
this.addEventListener('change', (e)=>this.handleChange(e));
this.$.dropTargetDiv.addEventListener("dragover", (e)=>this.preventEventDefault(e));
this.$.dropTargetDiv.addEventListener("drop", (e)=>this.loadObject(e));
this.$.imageLoader.addEventListener("change", (e)=>this.readURL(e));
this.$.backgroundImageLoader.addEventListener("change", (e)=>this.readBackgroundURL(e));
this.$.textureImageLoader.addEventListener("change", (e)=>this.readTextureURL(e));
console.log('ready');
}
generateEditView(obj) {
console.log("generateEditView");
console.log(obj);
var html = "<br/><br/><b>Edit Properties</b><br/><br/>";
for(var key in obj) {
if(key === "stateProperties") {
console.log(key, obj[key]);
var o = obj[key];
for(var k in o) {
console.log(o[k], obj[o[k]]);
switch(o[k]) {
case 'top':
console.log("setting top from:", this.topProperty);
this.topProperty = obj[o[k]];
html += '<input type="number" value="{{topProperty}}" min="0" max="150" id="topProperty">';
html += '<input type="range" value="{{topProperty}}" min="0" max="150" id="topPropertyRange">';
html += '<br/>';
console.log("set to: " + this.topProperty);
break;
case ‘…’:
break;
default;
}
console.log("adding: " + html);
this.$.editView.innerHTML = html;
}
handleClick(e) {
console.log("hamdleClick: " + e.type);
console.log("click: " + e.currentTarget.tagName);
console.log(e);
var id = e.path[0].id;
console.log("id: " + id);
switch(id) {
case '':
console.log("No ID - This is mostlike a selet of an object");
var target = e.target;
var obj = this.canvas.getActiveObject();
console.log("target:" + target);
console.log("selected Object:" + obj);
console.log("selected Menu: " + this.selectedMenu);
if(this.selectedMenu === "control") {
this.generateEditView(this.canvas.getActiveObject());
}
break;
break;
case 'topProperty':
console.log("Change TopProperty", this.$.topProperty);
this.topProperty = this.$.topProperty;
break;
default:
}
}
Cela ne fonctionne pas, je reçois l'erreur d'exécution suivante polymère-2-edit.html: 1979 La valeur spécifiée "{{}} topProperty" est pas un nombre valide. La valeur doit correspondre à l'expression régulière suivante: -? (\ D + | \ d +. \ D + |. \ D +) ([eE] [- +]? \ D +)? Il semble que le code généré ne capte pas la liaison.
Si je remplace le code par le suivant, le div s'affiche correctement. html + = ''; html + = ''
Mais je me undefined en lisant ceci, $. TopProperty ou cela. $. TopPropertyRange J'ai aussi essayé d'ajouter onchange = changeProperty (ce) sur les deux derniers et je reçois changeProperty est non définie message dans le débogueur. Je soupçonne qu'il s'attend à ce que la fonction soit à l'extérieur du polymère mais j'en ai besoin à l'intérieur du polymère pour définir les propriétés des objets.
Existe-t-il un exemple d'ajout de champs d'entrée dynamique et de traitement des modifications apportées?