In Web development, especially with React development projects, it’s easy to dynamically define tags (JSX)

const props = {
  id: ' '.className: ' ',
  data-a: ' '} <button {... props} />Copy the code

The benefits of a dynamic configuration tag is all logic control in JS end, 2 it is to make our template is very standard, convenient and follow-up maintenance updates, debris templates can be very good control, three is that we can according to the usage scenario very convenient configuration properties of props, such output in the HTML structure to get a cleaner structure

In the development of small programs, but can not achieve similar functions, resulting in our dynamic label is usually very redundant, redundant attributes are all displayed after the structure is generated

In the case of button, we know that button has a lot of attributes in the applet

As shown above, this is only a partial list of attributes

Dynamic templates

Our Button dynamic template should look something like this when written

configuration

Page({
  data: {
    option: {... }}})Copy the code
<button
  size="{{option.size || 'default'}}"
  type="{{option.type || 'default'}}"
  plain="{{option.plain || false}}"
  value="{{option. The value | | 'button'}}"
  .
  .
/>
Copy the code

The output structure of the debugging tool

<button bindtap=' ' size=' ' type=' ' plain=' ' disabled=false open-typ=' ' hover-class=' ' . />
Copy the code

As you can see, the structure of the output in the debugging tool becomes very redundant, which reduces the development efficiency. The redundant template output will spit out over time.

You can use template syntax to distinguish between buttons in different scenes. I know there are a lot of sounds like this, but it’s not a dynamic template.

To solve the problem

How to solve the output structure is not redundant, said so finally to the point, in fact, it is really a small trick, my development experience tells me that it works, you can also try, change the default values to ”, the modified template is as follows

<button
  size="{{option.size || ''}}"
  type="{{option.type || ''}}"
  plain="{{option.plain || ''}}"
  value="{{option. The value | | 'button'}}"
  .
  .
/>
Copy the code

The template you end up with is a beautiful structure

<button value='button' />
Copy the code

Pay attention to our open source applets

Github.com/webkixi/aot…