AngularJS Scope vs. Bind - javascript

I'm just curious about this issue I have:
In the MainController I have this:
$scope._layout = { currentYear: moment().format('YYYY') };
While in the html layout page I have this.
[...]
<body class="" ng-controller="MainController">
<!-- BEGIN PAGE CONTAINER-->
{% block content %}{% endblock %}
<!-- END CONTAINER -->
<span>{{_layout.currentYear}}</span>
[...]
This above won't work, {{_layout.currentYear}} displays nothing, but if I change it to be ng-bind, then it works.
[...]
<body class="" ng-controller="MainController">
<!-- BEGIN PAGE CONTAINER-->
{% block content %}{% endblock %}
<!-- END CONTAINER -->
<span ng-bind="_layout.currentYear"></span>
[...]
Why the {{_layout.currentYear}} syntax doesn't work?

Related

Link element tags are disabled when a background image is set

I've got this base.html from which other html documents extend
base.html
<!DOCTYPE html>
<html>
<head>
<--!some css links and jquery source headers-->
<style>
{% block style %}
.container{
position: relative;
}
{% endblock style %}
</style>
</head>
<body>
<div class="container">
{% block breadcrumb %}{% endblock breadcrumb %}
{% block content %}{% endblock content %}
</div>
</body>
<script type="text/JavaScript">
{% block script %}
var imgName = "{% url 'img_file.png' %}";
document.body.style.backgroundImage = "url('"+ imgName.src +"')";
{% endblock script %}
</script>
<\html>
a document that extends from base.html
index.html
{% extends 'base.html' %}
{% block breadcrumb %}
<div class="nav nav-bar nav-bar-dark>
some link
</div>
{% endblock %}
{% block content %}
<form action="view-url" method="post">
{{ form }}
<input type="submit" class="btn" value"Submit">
</form>
{% endblock %}
the submit input works well but the link (to some url) seems to be disabled. When I remove the background image from the base.html, the link works just fine. Any help on what I'm missing here please ,

Front Matter Data in Layouts is not working Eleventy

I'm having troubles using front matter in my layouts. It simply displays out the front matter to the page without creating the data needed for my layout.
Here goes the code:
/src/_includes/layouts/base.html
---
rightLinks : [
{
"icon": "mail_outline",
"href": "https://google.com"
}
]
---
<!DOCTYPE html>
<html lang="es-AR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght#0,300;0,400;0,600;0,700;0,900;1,300;1,400;1,600;1,700;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/global.css">
</head>
<body>
<!-- top-nav try to use rightLinks data from this layout -->
{% include "partials/top-nav.html" %}
{% include "partials/main-nav.html" %}
<main tabindex="-1" id="main-content">{% block content %}{% endblock %}</main>
</body>
</html>
/src/_includes/layouts/home.html
{% extends "layouts/base.html" %}
{% block content %}
<section class="hero is-black is-fullheight-with-navbar hero-home">
<div class="hero-body">
<div class="container">
<div>
<h1 class="title text-black text-huge">
Nexus Materiales Eléctricos
</h1>
<h2 class="subtitle is-4">
Somos mayoristas en insúmos eléctricos de calidad.
</h2>
</div>
<div class="mt-6">
<a href="/marcas" class="button is-rounded is-large is-dark is-uppercase text-semi-black">
ver marcas
</a>
</div>
</div>
</div>
</section>
<section class="section has-background-white">
<h2 class="title">Nuestras marcas destacadas</h2>
<h3 class="subtitle">Calidad y seguridad</h3>
</section>
{% endblock %}
/src/index.md
---
title: 'Hello World!'
layout: 'layouts/home'
---
I get as a visual result the actual string at the top:
It seems to me that Eleventy, for some reason, is skipping the front matter.
Here is my Eleventy configuration file:
module.exports = function(config) {
config.addWatchTarget("./src/sass/");
config.addPassthroughCopy('./src/images')
// Return your Object options:
return {
dir: {
input: "src",
output: "dist"
},
markdownTemplateEngine: 'njk',
dataTemplateEngine: 'njk',
htmlTemplateEngine: 'njk',
}
};
Someone can explain to me why is this happening, and how can I solve this? Thanks
Front-matter data is only available in layout files that are directly referenced by pages with the layout: front matter key, not with Nunjucks {% extends %}. Front matter data in directly referenced layout files are merged with other data as part of 11ty's data cascade. (11ty docs: front matter in layouts)
For example:
<!-- index.md -->
---
layout: layouts/content
---
# some content here
{# layouts/base.njk #}
---
hello: "world"
---
{# ^ the above will be printed as plain text and isn't available #}
{# layouts/content.njk #}
---
someKey: "something"
---
{% extends "layouts/base.njk" %}
{{ someKey }}
{# ^ this will render "something" as expected #}
This is likely because {% extends %} is a feature of Nunjucks, and Eleventy is not aware of which other Nunjucks files are being referenced.
For your situation, you have a couple of options. First, you could place your front matter data in layouts/home, since that's what you're referencing in your index.md. Another option is to just use Nunjuck's set tag.
{% set links = [
{
"icon": "mail_outline",
"href": "https://google.com"
}
] %}
{% for link in links %}
{{ link.icon }}
{{ link.href }}
{% endfor %}

running javascript in a nested component-like django partial template

I would like to make a "component" (several actually, but let us start with one). That is I would like to have a template file, which itself may include javascript. Then I would like to be able to include that "component" in whatever (other) Django template file.
Importantly: in the base.html I include utility javascript (like jquery or bootstrap or whatever) and I want those things to be in scope in the component's javascript.
Are there other achitectural ways of achieving this?
Here is a visual of one Django template:
and when an item is clicked, it will update the other part of the page, allowing that template and its included JS to run with access to the rest of the page's javascript.
Here is some code to go along with it (I mistyped base to baste, so I went with the theme):
models.py
class CommonTask(models.Model): ## nothing special
name = models.CharField(max_length=30, default='yummy')
urls.py
app_name = 'food'
urlpatterns = [
## the list view on the left
url(r'^edible/?', views.EdibleList.as_view(), name='edible'),
## the partial on the right
url(r'^billable/edit/(?P<jid>[a-zA-Z0-9-\w:]+)/?', views.EdibleEdit.as_view(), name='edibleEdit'),
views.py
class EdibleList(ListView):
template_name = 'food/edible-list.html'
def get_queryset(self):
return Dish.objects.filter('edible'=True)
class EdibleEdit(UpdateView):
form_class = EdibleForm
template_name = 'food/edible-edit.html'
def get_initial(self):
… # for the form/formset info
def get_object(self):
return get_object_or_404(Dish, pk=self.kwargs['pk'])
baste.html
<!DOCTYPE html>
{% load static %}
<html lang="en" xml:lang="en" dir="ltr" xmlns= "http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="{% static "css/main.css" %}">
{% block meta_tags %}{% endblock meta_tags %}
{% block scripts-head %}{% endblock scripts-head %}
<title>Edibles - {% block title%}{% endblock title%}</title>
{% block extra_head %} {% endblock extra_head %}
</head>
<body>
{% block content %} {% endblock content %}
{% block scripts %} {% endblock scripts %}
<script>
{% block script-inline %} {% endblock script-inline %}
</script>
<footer> FOOTER </footer>
</body>
</html>
list.html
{% extends "baste.html" %}
{% load static %}
{% block title%}Edible List - {{dish.name}} {% endblock title%}
{% block extra_head %}
<link rel="stylesheet" href="{% static "food/food.css" %}">
{% endblock extra_head %}
{% block script-inline %}
console.log('This works, as it is in the views original compiled template');
console.log('This does not work, as it relies on the partial to be loaded, but
the partial isn't loaded yet, and this wont update after the partial is loaded);
var interpuncts = document.getElementsByClassName("interpuncts");
for (let i=0; i < interpuncts.length; i++){
interpuncts[i].onclick=function(event){
console.log('gh1');
};
};
// showing the right partial when clicked
pane = document.getElementById("edible-single");
showPane = function(link) {
fetch(link).then(function(response) {
return response.text();
}).then(function(body) {
pane.innerHTML = body;
});
};
let edibleLinks = document.querySelectorAll("a.edible-link");
edibleLinks.forEach(function(edibleLink) {
edibleLink.addEventListener('click', function(e){
e.preventDefault();
showPane(edibleLink.getAttribute('href'));
});
});
{% endblock script-inline %}
{% block scripts %} {% endblock scripts %}
{% block content %}
{% include "food/nav.html" with currentView="edibleList" %}
<div class="container-fluid">
<h1 class="text-center">Edible Dishes</h1>
<hr>
<div class="row scrollable-row">
<div class="col-3 scrollable-col">
<table class="table">
<tbody>
{% for dish in dish-list %}
<tr class="d-flex">
<td class="col">
<a class="edible-link"
href="{% url 'food:ediblebleDetail'
pk=dish.pk %}"
data-pk="{{dish.pk}}">{{dish.name}}</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="col-9 scrollable-col" id="edible-single"></div>
</div>
</div>
{% endblock content %}
editPartial.html
{% load static %}
{# no blocks work in this, because it can't extend the list.html, because the view #}
{# can't render to endpoint(sibling) templates at the same time #}
{# {% block * %} #}
<script>
console.log('This won\'t run, as it is loaded separately as just an inclusion
text from the list AJAX call.')
$(document).ready(function() {
console.log('This can\'t work because it relies on $ to be accessible, which it is not')
var interpuncts=document.getElementsByClassName("interpuncts");
for (let i=0; i < interpuncts.length; i++){
interpuncts[i].onclick=function(event){
console.log('I can not get a handle on the partial template items after
they are loaded as a partial');
};
};
});
</script>
<div class="container">
Dish - {{dish.name}}
<hr>
<form action="{% form url %}" method="post">
{% csrf_token %}
{{ form }}
{# Some element(s) that needs some javascript to act on it, more comprehensive than #}
{# bootstrap show/hide can do #}
<div class="interpuncts">
··· Do something with this element
</div>
<input class="btn btn-primary pull-right" type="submit" value="Save">
</form>
</div>
NOTES:
This is similar to Rails' partials if I remember, and definitely doable in 'Angular/Ember'. I think this boils down to some architecture, or package I am unaware of and can't find documentation. I am unsure of it is doable with inclusion tags.

django template show content only in a jquery dialog

I have a Django HTML template as follows:
{% extends 'base.html' %}
{% block title %}Cloud | Review {% endblock %}
{% block content %}
{% load static %}
{% load render_table from django_tables2 %}
<div id="dialog" title="Dialog">
<p>Testing a simple Dialog box.</p>
</div>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
function EditDialog() {
$( "#dialog" ).dialog();
return false;
}
</script>
<div class="function-page">
<div class="table-form">
<div class="function-container">
{% render_table reviews %}
</div>
</div>
</div>
{% endblock %}
The jquery dialog box is launched when the user clicks a link. The issue is when the page is loaded, the div contents are shown at the top of the page
<div id="dialog" title="Dialog">
<p>Testing a simple Dialog box.</p>
</div>
Is it possible to show this content only in the jquery dialog and not in the usual page content.
Also, once I show the dialog box by called EditDialog() the div disappears from the main underlying page.
Ok, simply:
<div id="dialog" title="Dialog" style="display: none;">
<p>Testing a simple Dialog box.</p>
</div>
did the trick

Django running a javascript function imported from parent, called by the child

I have a javascript file in an outside folder under static. My index.html is not running the javascript function that was imported from base.html.
File path:
-- project
-- app
-- templates
-- app name
-- index.html
-- src
-- static
-- hello_world.js
-- templates
-- base.html
View page source from browser
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
<script type='text/javascript' src="/static/hello_world.js"></script>
</head>
<body>
<div id="navigation">
<table border=0 cellpadding=7>
<tr>
<td>Home</td>
<td>Register</td>
<td>Login</td>
</tr>
</table>
</div>
<div id="content">
<h2> Welcome to WAM's board 2 player board games! </h2>
<canvas onload="entryPoint();" id="myCanvas" width="578" height="200"></canvas>
</div>
</body>
</html>
Base.html
{% block doctype %}<!DOCTYPE HTML> {% endblock %}
<html>
{% block head %}
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
{% load staticfiles %}
<script type='text/javascript' src="{% static "hello_world.js" %}"></script>
</head>
{% endblock %}
<body>
{% block navbar %}
<div id="navigation">
<table border=0 cellpadding=7>
<tr>
<td>Home</td>
{% if user_logged_in %}
<td>Upload</td>
<td>Challenge User</td>
<td>Logout of {{ user_name }}</td>
{% else %}
<td>Register</td>
<td>Login</td>
{% endif %}
</tr>
</table>
</div>
{% endblock %}
<div id="content">
{% block content %}{% endblock %}
</div>
</body>
</html>
index.html
{% extends "base.html" %}
{% block navbar %}{{ block.super }}{% endblock %}
{% block content %}
<h2> Welcome to WAM's board 2 player board games! </h2>
<canvas onload="entryPoint();" id="myCanvas" width="578" height="200"></canvas>
{% endblock %}
Put this
import os
BASE_DIR = os.path.dirname(os.path.dirname(__file__)) # already present in newest django versions
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
in your settings.py, or simply put your static files inside static folders inside app folders

Categories