Comments (4)
Hi, all good! let's see...
- You cold create a view that just renders a single component and launch it, if you are using django channels with redis and the auto-broadcast feature of reactor, you should be able to do this. When you enable auto-broadcast (https://github.com/edelvalle/reactor#settings) reactor will watch changes in the models using model signals and will broadcast a message to django channels, like in:
class User:
pass
class Boat:
users = models.ManyToManyField(User, related_name='boats')
if you have a user with ID 1, associated to a boat with id 2....
u = User.objects.get(id=1)
u.save()
Will trigger the following messages, depending on how did you configure auto-broadcast:
user
, meaning: a change was made to a useruser.1
, meaning: a change was made to user with id 1boat.2.users
, meaning: a user of boat with id 2 was changed
In the code of your component you can do self.subscrube(f"boat.{boat.id}.users")
, and that will trigger a refresh
in your component when a message on that channel is issued, that refresh causes the component to run the mount
method again, refreshing it's state from the database.
**I think I need to write proper documentation about this and the live cycles of the component.
-
send_redirect
usesfrom django.shortcuts import resolve_url
to resolve the URL so you can pass almost anything to it, it uses the same logic as https://docs.djangoproject.com/en/3.1/topics/http/shortcuts/#redirect -
Is hard to tell what's going on without specifics, but it could be that your component rendered it self empty or a destroy message was issued.
I will use your feedback to improve the documentation and as always, sorry for my broken English.
Happy hacking!
from reactor.
Hello Eddy, sorry for late response.
- Thank you for the explanation about
subscribe
, but with the rendering of the component it is still not clear, maybe I didn't even fully understand your answer. I should fully describe what I want to do and provide some of my code:
So, i have psychologists_list.html
in which there are links to the views of changing objects of psychologists:
<p>
<a href="{% url 'psy-user-profile-update' psy.id %}">{{ psy.username }}</a>
</p>
Then in psy_user_profile_update.html
i render component which contains a formset:
<form method="post" enctype="multipart/form-data">{% csrf_token %}
<div class="form-group">
{{ form.email|as_crispy_field }}
</div>
...
{{ profile.management_form }}
{% for form in profile.forms %}
{% component 'dynamic-component' form=form profile=user.profile %}
{% endfor %}
</form>
And psy_user_profile_update_dynamic.html
which is a component and contains statuses
form field, in fact, I want to add these statuses asynchronously by following link:
<div class="form-group">
{{ form.statuses|as_crispy_field }}
</div>
<a href="{% url 'psy-status-create'%}" target="_blank" class="non-color-link">
<i class="fa fa-plus-square"></i>
</a>
**
I tried to put both forms in a template like this:
{% component 'dynamic-component' form=form profile_forms=profile.forms profile=user.profile %}
But then when I try to generate a token in the component template {% csrf_token %}, the token is not generated, I don't understand the reason for this.
**
**
As I understand it, the only way to render the component and pass the state to it is:
{% component 'component-name' state=state %}
But, I tried to do something like your example with to-do
:
<div is="dymanic-component" id="{{ this.id }}" state="{{ this.serialize|tojson }}">
I thought that this is how you can use a component and render it implicitly, but ran into a problem how to pass the state correctly, tried to do it differently:
state="{{ statuses: profile.statuses }}"
,
state="{{ statuses=profile.statuses }}"
,
state="{{ statuses=profile.statuses|tojson }}"
and so on)
**
Finally the code of my component:
from psychologists.models import PsychologistStatus, PsychologistUserProfile
from reactor.component import Component
class DynamicComponent(Component):
template_name = 'cadmin/psychologists/psy_user_profile_update_dynamic.html'
def mount(self, form, profile, **kwargs):
self.form = form
self.profile = profile
self.subscribe(f"psychologistuserprofile.{profile.id}.statuses")
def serialize(self):
return dict(
form=self.form,
profile=self.profile,
)
Also added to settings:
AUTO_BROADCAST = {
# model_a
# model_a.del
# model_a.new
'MODEL': True,
# model_a.1234
'MODEL_PK': True,
# model_b.1234.model_a_set
# model_b.1234.model_a_set.new
# model_b.1234.model_a_set.del
'RELATED': True,
# model_b.1234.model_a_set
# model_a.1234.model_b_set
'M2M': True,
}
CHANNEL_LAYERS = {
"default": {
"BACKEND": "channels_redis.core.RedisChannelLayer",
"CONFIG": {
"hosts": [("127.0.0.1", 6379)],
},
},
}
I may have missed something or don't understand it, but it doesn't work yet(statuses are not updated after adding).
- Understandably
- Yes, the problem was just in the empty state.
**I think I need to write proper documentation about this and the live cycles of the component.
It will be perfectly and solve misunderstandings.
Sorry that I did not immediately describe all the problems I encountered.
And also excuse me for my English.
from reactor.
First of all, I need to write proper documentation and examples, that's for sure, and that's what you are missing here.
From a quick look the serialize
method needs to return also the id... if you do not return the id of the component it will go missing from the interface because reactor will not be able to find it.
The data returned by serialize
is the sate of the component and gets serialized to JSON, and is passed back to mount
when the components connects to the back-end, so make sure to not use objects that are not JSON serializable.
Also instead of: <div is="dymanic-component" id="{{ this.id }}" state="{{ this.serialize|tojson }}">
you can do: <div {{ header }}>
from reactor.
Thank you for the quick response!
so make sure to not use objects that are not JSON serializable.
I missed {{ header }}
and now I see that neither the form nor the form.statuses can be serialized. But in any case, I need to somehow transfer form
to the component in order to display it in the component template, since I cannot do something like this in psy_user_profile_update_dynamic.html:
{% block body %}
{% component 'dynamic-component' %}
{% endblock body %}
This will lead to endless recursion.
First of all, I need to write proper documentation and examples, that's for sure, and that's what you are missing here.
Ok, I'll wait for your examples, thank you in advance!
from reactor.
Related Issues (20)
- Loading state for component HOT 4
- Release notes/changelog? HOT 1
- Websocket path & django served in subpath
- Problem with inline script tag evaluation
- understanding reactor HOT 2
- Another LiveView for django project HOT 5
- Cannot get subscriptions to work, _channel_name is None HOT 4
- ModuleNotFoundError: No module named 'reactor.urls' HOT 2
- setup guide: "reactor.urls" should be renamed correctly HOT 1
- daphne/channels update HOT 9
- Rationals for the commit "Huge blob commit to drive reactor forward" HOT 14
- Bug? '__signature__' attribute of 'BlockEditor' is class-only HOT 1
- error at websocket WebSocket connection to 'wss://example.com/__reactor__' failed: Error during WebSocket handshake: Unexpected response code: 301
- AttributeError: '__signature__' attribute of 'XCounter' is class-only
- Missing 2.2.1b0 tag on GitHub
- /__reactor__ URL not found when no ASGI (dev) server is installed. Needs doc++ HOT 1
- _url_params: switch key/value in dict to have a more "natural" direction? HOT 1
- Question about the end of the component life cycle HOT 5
- Great job, I have a few questions HOT 23
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from reactor.