DecSoft Soporte - Create new reactive element at runtime

Create new reactive element at runtime

Ahorre tiempo, recursos y dinero creando apps para Android, iOS y más con la misma base de código.

Cree apps y expanda sus capacidades usando el lenguaje más popular del mundo: Javascript.

Diseñe para pantallas pequeñas y distribuya también (sin cambios) en dispositivos como tablets.

¡Eche un vistazo a nuestro canal de YouTube y suscríbase para recibir notificaciones sobre nuevos vídeos!

Compile, convierta sus modernas apps y juegos HTML en programas ejecutables sin dependencias para Microsoft Windows.

DecSoft App Builder integra un asistente de Open AI para ayudarle mientras desarrolla sus apps.

Los NeoPlugins de DecSoft tienen versiones "designtime" y "runtime" para reducir el tamaño de sus apps.

Cree apps multiplataforma con DecSoft App Builder, incluyendo Android e iOS, con la misma base de código.

DecSoft NeoPlugins pone sus proyectos de VisualNeo en otro nivel con +1.000 nuevas acciones para sus apps.

Ahorre dinero comprando nuestros paquetes de NeoPlugins. ¡Cinco, Diez e incluso nuestra colección entera a un precio increíble!

DecSoft App Builder incluye un conveniente Compilador por línea de comandos para compilar sus apps desde la consola.

DecSoft HTML Compiler incluye un conveniente Compilador por línea de comandos para compilar sus apps desde la consola.

Cree modernas apps y juegos HTML a otro nivel haciendo cosas que incluso las modernas apps y juegos HTML no pueden.

Los plugins oficiales de Apache Cordova se incluyen de serie y hay cientos de ellos disponibles para su uso.

¡Eche un vistazo a algunas de preguntas más frecuentes sobre nosotros y nuestros productos!

DecSoft HTML Compiler es fácil de usar: personalize su proyecto y compile sus apps y sus juegos rápidamente.

Jhonson

Hi david, say I have below in function to be executed later. How to make the reactive {{app.store.message}} to work? currently not working.

var pa= document.createElement("p");
var inp= document.createElement("input");
pa.innerHTML="{{app.store.message}}";  
inp.setAttribute("v-model", "app.store.message");
document.body.appendChild(pa); 
document.body.appendChild(inp); 
app.setVar('message','messagehere');

//<p>{{app.store.message}}</p>
//<input v-model="app.store.message">

DecSoft

Hello Jhonson,

Maybe there is a way, but, honestly I can't find it. Of course the code that you shows don't work as you expected. I think that we need a template to be prepared in order to properly work. I made some tests and here is what I can suggest. First of all, place the below Javascript code in the app's Mounted event:


app.setVar('myInputs', [
 {
   model: 0,
   id: "my-input-1",
   label: "My input 1",
   type: "text",
   classes: "form-control form-control-md",
   placeholder: "Input 1 placeholder"
 },
 {
   model: 1,
   id: "my-input-2",
   label: "My input 2",
   type: "number",
   classes: "form-control form-control-md",
   placeholder: "Input 2 placeholder"
 }
]);

app.setVar('myInputModels', []);

As you can see, we can define one or more "inputs", including their properties, types and even a possible "label" to be used for every input. Additionally, we define an app variable which will store the inputs models / values. Now, place the below HTML markup (VueJS template) inside an HTML control:


{{app.store.myInputModels}}



<div v-for="input in app.store.myInputs" class="form-group">
 <label v-bind:for="input.id" v-html="input.label"></label>
 <input v-bind:id="input.id" v-bind:type="input.type"
  v-bind:placeholder="input.placeholder" v-bind:class="input.classes"
   v-model="app.store.myInputModels[input.model]">
</div>

When you run the app you can see the two defined inputs along with all the properties and even the labels, properly referred for every input. You can even place the above template inside an HTML control, and, don't define the "myInputs" and "myInputsModels" variables in the app's Mounted event: you can also do in a button's Click event, for example, and, also works as expected: the point is that you can't see nothing in the HTML, except when the variables are properly defined.

On the other hand, you specifically ask how to create "reactive element at runtime", but, I honestly can't see the point for these elements to be "reactives". I mean, it's perfectly possible to create elements at runtime, handle their events, get their values, etc., etc., just like I already shows in this specific thread's post. If you ask me "what you will do", David, I will answer that, of course, depend on the app's needs, but, what I mean is that it's perfectly possible to create controls at runtime, not "reactives", but, perfectly usables and with all the expected characteristics and behaviour.

The only point that may you must take in consideration is the where to add the controls. In your above code, you add controls directly to the HTML document's body: this is not correct, to say like that, since you can / must use an HTML control, and, inside that control, place any control that you need at designtime or at runtime, depends on your needs. I do this in various apps, for example, to add inputs by user demand (supose an app's view which allows the user to add one or more input files to be uploaded) and it's perfectly possible.

Another thing to take in consideration can be the way in which you can add elements at runtime: since we have the jQuery library in our apps, ready to be used, I think there is no point to don't take the jQuery library advantages. So, suposing I want to add inputs at runtime when a user click a button, I will do in a way similar than the below one:


$('#html1').append('\
 <div class="form-group">\
  <input type="text" class="form-control form-control-md" placeholder="Type here">\
 </div>');

Please, don't hesitate to post here if you have any further questions around this thread's topic.

Purchase one or more licenses of our products if they are useful to you!

Todo el mundo puede leer el foro de soporte de DecSoft para aprender del mismo, sin embargo, sólo los clientes de DecSoft pueden abrir nuevos hilos. Compre una o más licencias de productos de DecSoft y obtendrá este y otros beneficios.