Hướng dẫn python callback naming convention
In the previous chapter we learned that This chapter describes how to make your Dash apps using callback functions: functions that are automatically called by Dash whenever an input component’s property changes, in order to update some property in another component (the output). For optimum user-interaction and chart loading performance, production Let’s get started with a simple example of an interactive Dash app. Simple Interactive Dash App
Change the value in the text box to see callbacks in action! Let’s break down this example:
Learn more
about using the a. By writing this decorator, we’re telling Dash to call this function for us whenever the value of the “input” component (the text box) changes in order to update the children of the “output” component on the page (the HTML div). b. You can use any name for the function that is wrapped by the c. You can use any name for the function
arguments, but you must use the same names inside the callback function as you do in its definition, just like in a regular Python function. The arguments are positional by default: first the d. You must use the same e. The f. If you’re curious about what the decorator syntax means under the hood, you can read this StackOverflow answer and learn more about decorators by reading PEP 318 – Decorators for Functions and Methods.
It’s sort of like programming with Microsoft Excel: Remember how every component is described entirely through its Let’s take a look at another example where a Dash App Layout With Figure and Slider
Theming with Dash Enterprise Design Kit Default Theme Mars Theme Neptune Theme Miller Theme Extrasolar Theme Preset Themes In this example, the There are a few nice patterns in this example:
Dash App With Multiple InputsIn Dash, any “output” can have multiple “input” components.
Theming with Dash Enterprise Design Kit Default Theme Mars
Theme Neptune Theme Miller Theme Extrasolar Theme Design
Kit Theme Editor In this example, the callback executes whenever the The input arguments of the callback are the current Even though only a single Let’s extend our example to include multiple outputs. Dash App With Multiple OutputsSo far all the callbacks we’ve written only update a
single
A word of caution: it’s not always a good idea to combine outputs, even if
Dash App With Chained CallbacksYou can also chain outputs and inputs together: the output of one callback This pattern can be used to create dynamic UIs where, for example, one input component
The first callback updates the available options in the second The second callback sets an initial value when the The final callback displays the selected Dash App With StateIn some cases, you might have a “form”-like
pattern in your Attaching a callback to the input values directly can look like this:
In this example, the callback function is fired whenever any of the
In this example, changing text in the Note that we’re triggering the callback by listening to the Passing Components Into Callbacks Instead of IDsWhen creating app layouts in earlier examples, we assigned IDs to components within the layout and later referenced these in callback inputs and outputs. In the first example, there is a
You can also provide components directly as inputs and outputs without adding or referencing an Here is the first example again. Prior to declaring the app layout, we create two components, assigning each one to a variable. We then reference these variables in the layout and pass them directly as inputs and outputs to the callback.
In Python 3.8 and higher, you can use the walrus operator to declare the component variables within the app layout:
SummaryWe’ve covered the fundamentals of callbacks in Dash. The next part of the Dash tutorial covers interactive graphing. Dash Tutorial Part 4: Interactive Graphing |