p-bind (or :)

p-bind allows you to set HTML attributes on elements based on the result of Python expressions.

Simple example

Here we bind the value of the contenteditable attribute to the value of store.editor.editable, so if it’s True, contenteditable will be set to True and will be editable else it will be set to False and will not be editable.

demo.py

from prune import Prune, notify

class Editor:
    def __init__(self) -> None:
        self.editable = True

    @notify #update the DOM at the end of the method
    def toggle_editable(self):
        self.editable = not self.editable

Prune(editor=Editor())

index.html

<h4 p-bind:contenteditable="store.editor.editable">Click on me to modify my text</h4>
<button @click="store.editor.toggle_editable()">Toggle editable</button>

Click on me to modify my text

Toggle editable

Shorthand syntax

You can use : instead of p-bind like this :

index.html

<h4 :contenteditable="store.editor.editable">Click on me to modify my text</h4>
<button @click="store.editor.toggle_editable()">Toggle editable</button>

Click on me to modify my text

Toggle editable

Binding classes

p-bind:class behaves differently than other attributes under the hood.

Instead of replacing the whole value of the class attribute it will only add or remove classes to the basic class attribute.

This way you can define classes on your element and choose to add specific classes on conditition. (it’s the only binding which does that)

As you can see here the text keeps the italic class and when store.editor.editable is False the freeze class is added but doesn’t replace the old class attribute.

index.html

<h4 :contenteditable="store.editor.editable" class="italic" :class="' freeze' if not store.editor.editable else ''">Click on me to modify my text</h4>
<button p-on:click="store.editor.toggle_editable()">Toggle editable</button>>

Click on me to modify my text

Toggle editable