how to pass django params in react components - reactjs

i am new to react , i am building simple blog where user can post with title and body
in html its done with listview with:
{% for x in object_list %}
{% endfor %}
but in react component its not getting good result and showing error
here is my code:
models
class post(models.Model):
title = models.CharField(max_length=100)
body=models.TextField()
views
class list(ListView):
model = post
template_name = 'index.html'
post.js
function Post(){
return(
{% for x in object_list %}
{% endfor %}
)
}
in react what can i do to retreive data from model like we used to do in normal html, or show the object from model in components??

Related

How can you loop through all of the children of a model?

In Django I am trying to loop through all of the children of my Todo model. But whenever I try to run it, it gives me an AttributeError that says "Manager isn't accessible via Todo instances". My code looks like this:
{% extends 'base.html' %}
{% block content %}
<h3>Tasks</h3>
{% for t in model.objects.all %} <!-- Error -->
<p>{{t.name}}</p>
{% endfor %}
{% endblock %}
{% block options %}
<li class="bg-light py-3 w-100 px-4 rounded text-nowrap fs-4">
<button class="text-decoration-none text-dark">Save</button>
</li>
{% endblock %}
I tried to just put the model in the context, and then I got an error in the HTML, so I figured out that it happened when I tried to reference 'model.objects.all'.
Inside of your view you need to specify what django should pass to the template. It does not serve the entire Database; therefore queries like in model.objects.all inside of your templates are not allowed.
Specify the queryset inside your views.py:
def todo_view(request):
context = {}
context['my_todos'] = my_todo_model.objects.all()
context['most_important_todo'] = my_todo_model.objects.get(pk=1)
# put your own logic inside the `.get` method above
return render(request, 'my_template.html' context)
And then access it inside of your template like so:
{% for t in my_todos %}
<p>{{ t.name }}</p>
{% endfor %}
{{ most_important_todo.name }}
Because we put a queryset inside of my_todos we can loop over it in the template. most_important_todo ist just a single object passed to the template, so we can access its properties (e.g. the name) directly.
Let me know how it goes

Python Crash coursem Chapter 18 Pizzeria Project - Getting 'pizzas' is not a valid view function or pattern name

I am not able to get the 'pizzas' page template to render. The local environment is giving me an error that says: Reverse for 'pizzas' not found. 'pizzas' is not a valid view function or pattern name. Does anyone see the issue? My code is below. Thanks!
urls.py for project folder (pizzeria):
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('pizzas.urls')),
]
urls.py for app name (pizzas):
from django.urls import path
from . import views
app_name = 'pizzas'
urlpatterns = [
path('', views.index, name='index'),
path('pizzas/', views.pizzas, name='pizzas'),
]
models.py:
from django.db import models
class Pizza(models.Model):
"""Holds names of all pizza types, i.e. Hawaiian and Meat Lovers."""
name = models.CharField(max_length=200)
def __str__(self):
"""Return a string representation of the model."""
return self.name
class Topping(models.Model):
"""Toppings that beloong to specific types of pizzas."""
pizza = models.ForeignKey(Pizza, on_delete=models.CASCADE)
text = models.TextField()
def __str__(self):
"""Return a string representation of the model."""
if len(self.name) > 50:
return f"{self.text[:50]}..."
else:
return f"{self.text}"
base.html:
<p>
<a href="{% url '>Pizzeria</a> -
<a href="{% url '>Pizzas</a>
</p>
{% block content %}{% endblock content %}
index.html:
{% extends "pizzas/base.html" %}
{% block content %}
<p>Pizzeria shows customers all pizza types and the toppings on each type.</p>
{% endblock content %}
views.py
from django.shortcuts import render
from .models import Pizza
def index(request):
"""The home page for Pizzeria."""
return render(request, 'pizzas/index.html')
def pizzas(request):
"""Show all pizzas."""
pizzas = Pizza.objects.all()
context = {'pizzas': pizzas}
return render(request, 'pizzas/pizzas.html', context)
pizzas.html:
{% extends 'pizzas/base.html' %}
{% block content %}
<p>Pizzas</p>
<ul>
{% for pizza in pizzas %}
<li>{{ pizza }}</li>
{% empty %}
<li>No pizzas have been added yet.</li>
{% endfor %}
</ul>
{% endblock content %}
The homepage ('pizzas/index') was rendering and inheriting properly from base.html. But when I tried adding a new pizzas page I started getting the above error message on the homepage.

How do I generate a list of pages in the sections for a sidemenu in Wagtail?

I am a true beginner in Wagtail. How do I generate a list of pages in the sections for a sidemenu in Wagtail?
I have the following site structure, as an example:
home/
fruits/
apples/
oranges/
grapes/
vegetables/
kale/
spinach/
cabbage/
home is of HomePage type using home_page.html template , and all the subpages are of ContentPage type using content_page.html template.
I want to make a side menu for all the content pages, listing all the pages in their groups. For example, this list:
Fruits
Apples
Oranges
Grapes
should be the sidemenu for the pages fruits, apple, oranges, and grapes.
page.get_children in the template only lists out if the page has children, so, in this case just fruits and vegetables.
How would I go about making that sidemenu?
The examples in Wagtail's documentation seem to imply that I can't have just a generic content type like ContentPage to have the sort of listing that I want, is that true?
Thanks a bunch!
welcome to Wagtail!
As with most things in web development, there are a few ways you can do this. The simplest to understand when you're just starting is to do this all through the template. So in your home_page.html you could have:
{% for parent in page.get_children %}
Page title: {{ parent.title }} <br />
{% if parent.get_children.count %}
{% for child in parent.get_children %}
- Child page title: {{ child.title }}<br/>
{% endfor %}
{% endif %}
{% endfor %}
What this does is:
Loops through the child pages of HomePage (labeled as parent in this loop) and prints Page title: {title_here}
Then it'll check for child pages of each parent loop iteration and print - Child page title: {child_title}
There's a gotcha here though. This will only work on the home_page.html template. Once you go to /fruits/ it'll try to perform the same logic, but this time it'll think Fruits is the new HomePage
There are 2 options you can take from here.
You can add custom context to every page to make sure you're always passing in the HomePage and loop through that. This is the simplest method and I'll show you the code below. Or,
You can create a Menu system using a Django Model and registering the Menu class as a Wagtail Snippet. I have a video with all the source code available if you want to take a deeper dive into Wagtail (https://www.youtube.com/watch?v=Y8a9ROUUJXU)
To add HomePage to every ContentPage you can add it to the context of every page, like so:
class ContentPage(Page):
# Fields here
def get_context(self, request, *args, **kwargs):
"""Adding HomePage to your page context."""
context = super().get_context(request, *args, **kwargs)
context["home_page"] = HomePage.objects.first()
return context
And in your templates you'd write:
{% for child_page in home_page.get_children %}
Page title: {{ child_page.title }} <br />
{% if child_page.get_children.count %}
{% for grandchild_page in child_page.get_children %}
- Child page title: {{ grandchild_page.title }}<br/>
{% endfor %}
{% endif %}
{% endfor %}
Edit: If you're on a grandchild page, like /fruits/apples/ and want to display the parent page title, and all the sibling pages (ie. /fruits/oranges/ and /fruits/grapes/) you can loop through the sibling pages. Something like this should work:
<!-- On `/fruits/` this will be the Home Page title. On `/fruits/apples/` this will be the Fruits page title. -->
<h2>{{ self.get_parent.title }}<h2>
{% for sibling in self.get_siblings %}
{{ sibling.title }}
{% endfor %}

Photologue not showing images or thumbnails

I am not able to get photologue to show the images. What am I doing wrong?
development environment
django 2.1
python 3.5
osx, virtual_env, recent pip
settings.py
MEDIA_ROOT = os.path.join(BASE_DIR, 'mst/media/')
MEDIA_URL = "/media/"
urls
urlpatterns += [
...
url(r'^photologue/', include('photologue.urls', namespace='photologue')),
]
model
from photologue.models import Photo, Gallery
class PhotoExtended(models.Model):
photo = models.OneToOneField(Photo, on_delete=models.CASCADE, related_name='photo')
related_model = models.ForeignKey(MyModel, on_delete=models.CASCADE)
def __str__(self):
return self.photo.title
class GalleryExtended(models.Model):
gallery = models.OneToOneField(Gallery, on_delete=models.CASCADE, related_name='gallery')
related_model = models.ForeignKey(MyModel, on_delete=models.CASCADE)
def __str__(self):
return self.gallery.title
class based view
class MyModelList(ListView):
model = MyModel
template_name = "pictures.html"
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
context['photos'] = PhotoExtended.objects.all()
context['galleries'] = GalleryExtended.objects.all()
return context
template (pictures.html):
{% block content %}
<ul>
{% for photoExtended in photos %}
<li>{{ photoExtended.photo.get_absolute_url }}</li>
<li>{{ photoExtended.photo.image }}</li>
<img src="/{{ photoExtended.photo.image }}" alt="{{ p.photo.title }}">
{% endfor %}
{% for gallery in galleries %}
<li></li>
{% endfor %}
shell response (per docs)
>>> from PIL import Image
>>>
notes
I migrated the database, and see the data in the database, and everything looks correct.
page renderings
photologue urls:
A single photo
the list of the photos
and the direct accessing of the image: (ra is the name in photologue, but em.jpeg is the file name)
and my view directly:
The template was wrong/outdated from an older version. Here is the correct usage in the template for an image within a list of images of type photologueExtended:
{% for photoExtended in photos %}
<!-- The link to the photologue template page with the photo and its gallery(s)-->
Link to page
<!-- The src link to the image thumbnail itself in the media url-->
<img src="{{ photoExtended.photo.get_thumbnail_url }}" />
<!-- The src link to the image itself in the media url-->
<img src="{{ photoExtended.photo.get_display_url }}" />
<!-- The photologue image's title/description/etc… -->
{{ photoExtended.photo.title }} <br>
{{ photoExtended.photo.description }} <br>
{% endfor %}
Also:
the url catchall in the main project urls.py was incorrect, and should be:
url(r'^$', indexView, name='indexView'),

How to access default page models in template wagtail

So this awesome Wagtail/Django framework is nice!
I like it allot.
Still getting used to but seems straight forward,
What I do not understand tho is how can I access default page models and render them in the templates?
So Wagtail has this models that you make based on their Page class.
class SomeClass(Page):
"""
Some text
"""
intro = models.CharField(max_length=255, blank=True)
body_small = models.CharField(max_length=255, blank=True)
All good and well.
Now my page template looks like this
{% extends "base.html" %}
{% load wagtailcore_tags %}
{% block base_content %}
{{ page.intro }}
{{ page.body_small }}
{% endblock %}
Now I want to add the settings model items like Published Date.
Those are default from Wagtail, see:
What page model do I need to use?
{{ page.published_date }} //Does not work
Any suggestions?
The fields in the Settings tab are available as {{ page.go_live_at }} and {{ page.expire_at }}. However, these are only used for scheduled publishing so may not be a particularly relevant thing to output on the page - {{ page.first_published_at }} and {{ page.last_published_at }} are probably more useful. See http://docs.wagtail.io/en/stable/reference/pages/model_reference.html for more.

Resources