javascript - How can I reuse a function in NiceGUI slots without client-side code duplication? - Stack Overflow

admin管理员组

文章数量:1278720

NiceGUI documentation on conditional formatting in Table suggests the following:

table.add_slot('body-cell-age', '''
    <q-td key="age" :props="props">
        <q-badge :color="props.value < 21 ? 'red' : 'green'">
            {{ props.value }}
        </q-badge>
    </q-td>
''')

This has a very simple logic, namely props.value < 21 ? 'red' : 'green'

I do want to put way more advanced formatting logic here, and reuse it across the entire app - in many slots of many different components. I do not want to just inline the same code snippet for each slot as this will result in a lot of extra code duplication on the client side. Instead, I want to define a function once, and call it from each slot.

How can I do it?

I tried attaching a function to window by adding <script> with ui.add_head_html but it was not recognized in my slot.

I tried using custom VUE component for my slot definition but then it doesn't appear to populate props.

NiceGUI documentation on conditional formatting in Table suggests the following:

table.add_slot('body-cell-age', '''
    <q-td key="age" :props="props">
        <q-badge :color="props.value < 21 ? 'red' : 'green'">
            {{ props.value }}
        </q-badge>
    </q-td>
''')

This has a very simple logic, namely props.value < 21 ? 'red' : 'green'

I do want to put way more advanced formatting logic here, and reuse it across the entire app - in many slots of many different components. I do not want to just inline the same code snippet for each slot as this will result in a lot of extra code duplication on the client side. Instead, I want to define a function once, and call it from each slot.

How can I do it?

I tried attaching a function to window by adding <script> with ui.add_head_html but it was not recognized in my slot.

I tried using custom VUE component for my slot definition but then it doesn't appear to populate props.

• javascript
• python
• nicegui

Share Improve this question Follow edited Feb 24 at 0:48 Konrad Jamrozik asked Feb 24 at 0:29 Konrad JamrozikKonrad Jamrozik 3,59655 gold badges3333 silver badges6767 bronze badges 3

• do you have to do it in JavaScript? how about putting in string logic = "props.value < 21 ? 'red' : 'green'" and later use f-strings to generate slots f'''<q-td .... {logic} ... /g-td>''' – furas Commented Feb 24 at 1:40
• @furas I want a way more advanced logic. Like a "format" function that will apply many formatting rules. If I do it the way you described it will be inlined many times in the frontend, which I want to avoid. – Konrad Jamrozik Commented Feb 24 at 1:59
• I never usef NiceUI but if you need dynamic logic then first it may need to use devtools in chrome/firefox to see what HTML it generates - and maybe it explains how to use <script> – furas Commented Feb 24 at 2:17

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

Defining a global JavaScript function to be used in props and templates is currently an open question: https://github/zauberzeug/nicegui/discussions/3754

One possible workaround is to augment the table rows with an additional pre-computed color attribute:

columns = [
    {'name': 'name', 'label': 'Name', 'field': 'name'},
    {'name': 'age', 'label': 'Age', 'field': 'age'},
]
rows = [
    {'name': 'Alice', 'age': 18},
    {'name': 'Bob', 'age': 21},
]
for row in rows:
    row['color'] = 'red' if row['age'] < 21 else 'green'
table = ui.table(columns=columns, rows=rows, row_key='name')
table.add_slot('body-cell-age', '''
    <q-td key="age" :props="props">
        <q-badge :color="props.row.color">
            {{ props.value }}
        </q-badge>
    </q-td>
''')

本文标签： javascriptHow can I reuse a function in NiceGUI slots without clientside code duplicationStack Overflow