mirror of
https://github.com/django-components/django-components.git
synced 2025-09-01 03:37:20 +00:00
🐛Prevent potential null elements
because {% component_js_dependencies %} loads all the components regardless
This commit is contained in:
parent
f5c3f64c86
commit
bb256f2ec8
2 changed files with 9 additions and 5 deletions
10
README.md
10
README.md
|
@ -220,7 +220,9 @@ Then you need a javascript file that specifies how you interact with this compon
|
||||||
```js
|
```js
|
||||||
/* In a file called [project root]/components/calendar/script.js */
|
/* In a file called [project root]/components/calendar/script.js */
|
||||||
(function(){
|
(function(){
|
||||||
document.querySelector(".calendar-component").onclick = function(){ alert("Clicked calendar!") }
|
if (document.querySelector(".calendar-component")) {
|
||||||
|
document.querySelector(".calendar-component").onclick = function(){ alert("Clicked calendar!"); };
|
||||||
|
}
|
||||||
})()
|
})()
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -336,13 +338,13 @@ Since the header block is unspecified, it's taken from the base template. If you
|
||||||
|
|
||||||
As you can see, component slots lets you write reusable containers, that you fill out when you use a component. This makes for highly reusable components, that can be used in different circumstances.
|
As you can see, component slots lets you write reusable containers, that you fill out when you use a component. This makes for highly reusable components, that can be used in different circumstances.
|
||||||
|
|
||||||
If you want to include a slot's default content while adding additional content, you can call `slot.super` to insert the base content, which works similarly to `block.super`.
|
If you want to include a slot's default content while adding additional content, you can call `slot.super` to insert the base content, which works similarly to `block.super`.
|
||||||
|
|
||||||
```htmldjango
|
```htmldjango
|
||||||
{% component_block "calendar" date="2020-06-06" %}
|
{% component_block "calendar" date="2020-06-06" %}
|
||||||
{% slot "body" %}{{ slot.super }}. Have a great day!{% endslot %}
|
{% slot "body" %}{{ slot.super }}. Have a great day!{% endslot %}
|
||||||
{% endcomponent_block %}
|
{% endcomponent_block %}
|
||||||
```
|
```
|
||||||
|
|
||||||
Produces:
|
Produces:
|
||||||
|
|
||||||
|
@ -367,7 +369,7 @@ By default, components can access context variables from the parent template, ju
|
||||||
|
|
||||||
NOTE: `{% csrf_token %}` tags need access to the top-level context, and they will not function properly if they are rendered in a component that is called with the `only` modifier.
|
NOTE: `{% csrf_token %}` tags need access to the top-level context, and they will not function properly if they are rendered in a component that is called with the `only` modifier.
|
||||||
|
|
||||||
Components can also access the outer context in their context methods by accessing the property `outer_context`.
|
Components can also access the outer context in their context methods by accessing the property `outer_context`.
|
||||||
|
|
||||||
|
|
||||||
# Available settings
|
# Available settings
|
||||||
|
|
|
@ -1,3 +1,5 @@
|
||||||
(function(){
|
(function(){
|
||||||
document.querySelector(".calendar-component").onclick = function(){alert("Clicked calendar!")}
|
if (document.querySelector(".calendar-component")) {
|
||||||
|
document.querySelector(".calendar-component").onclick = function(){ alert("Clicked calendar!"); };
|
||||||
|
}
|
||||||
})()
|
})()
|
Loading…
Add table
Add a link
Reference in a new issue