I have a working backbone application. The backend is Django.
I have a Detail View of posts that uses an underscore.js template with a bit of logic:
For example:
{[ _.each(model.images, function(i){ ]} <img src="{{i.image}}"> {[ }); ]}
I now want to create the server-side view, in order to serve the url example.com/details/10
What would be the best way of reusing the underscore.js template? Or should I just copy/paste it into another file and change it to the django templating language?
Have a look here to get an idea of how you could efficiently structure such an application.
The django app is inside the blog directory(look at the static/app.js)
Related
This question already has answers here:
Handling single page application url and django url
(7 answers)
Closed 1 year ago.
I'm trying to create a SPA with Vue in my Django project, so that Django handles only authentication templates and the rest of the frontend is entirely Vue rendered by webpack-loader, so it's Django rendering the Vue app. I'm doing this in order not to lose the benefits of having authentication handled entirely by Django.
So everything below /accounts/ will be handled by Django templates rendered by django views, while everything below /app/ will be handled by the Vue application.
I have the following:
urlpatterns = [
# Some standard django templates url here for authentication..
# ...
# The Vue app:
path('app/', views.vueApp, name='vueApp'),
]
So when the user navigates to mysite.com/app, Vue will handle the whole frontend as a SPA with its routes:
//main.js
const router = new VueRouter({
base: '/app',
mode: 'history',
routes: [
{ path: '/', component: Home },
{ path: '/test1', component: testcomponent },
{ path: '/test2', component: test2component }
]
})
The problem with my code, is that if i click on a link to test1 or to test2 from inside the Vue app, i will get redirected to testcomponent (mysite.com/app/test1) and test2component (mysite.com/app/test2); instead, if i open my browser and i navigate directly to mysite.com/app/test1 or mysite.com/app/test2 i will get a Page Not Found error by Django, i think because Django thinks i'm trying to reach a standard Django url, while instead i'm trying to reach an URL handled by my Vue app.
Is there any way to solve this? Thanks in advance!
To deal with this, you need a catch-all route to ensure that you capture everything after that / in your url as well. Otherwise it looks like your url is not a match. You need something like this (if you're using regex to match):
path('app/?.*$', views.vueApp, name='vueApp'),
This should match everything that starts with app/ and has other stuff after it as well. You don't care about capturing that stuff with django bc the vue router will handle it from that point.
ETA:
If you're NOT using regex, I think you can use this format to accept whatever comes after the slash:
path('app/<path:rest_of_path>', views.vueApp, name='vueApp'),
I am working on a django project that relies on angularjs and having trouble implementing angular-ui-router framework.
As mentioned in documentation I have included ui.router as a dependency,
app = angular.module('myApp',['restangular','ui.router',])
configured the states as follows,
app.config(['$stateProvider',function($stateProvider){
$stateProvider.state('landing',{
url: '/',
template:"<p> somethings here.</p>"
})
}]);
in base.html file i bootstrap the django project with angularjs as required
ng-app=myApp.
and in index.html which inherits base.html
<div ui-view>
<i>nothing here but this text</i>
</div>
my urls.py,
url(r'^$',home,name="homepage")
This does not work, ui-router never includes the inline template in index.html. index.html always loads nothing here but this text. I have looked at as much questions asked here but are not helping. What am I missing, is this specific to django?
I would say that these lines should make it:
app.config(['$urlRouterProvider',function($urlRouterProvider){
$urlRouterProvider.otherwise('/');
}]);
Check the working plunker here
Also check:
otherwise() for invalid routes
I did pagination in my django projet. Everything works just perfect, but my urls looks terrible, like
host:8000/?page=1
How to create nice urls like
host:8000/page/2/ or host:8000/2/
I use standard Paginator class via ListView
How to do this w/o third party code ?
If you define url pattern like this:
url(r'^/page/(?P<page>\d+)/$', 'myapp.views.list_view'),
then ListView will pass page url keyword into paginator.
Notice:
Each path segment is supposed to be a valid resource, so it's not clear what you will display on /path/ URL.
Django pagination system assumes that webpages will default to using the URL query, so it's recommended to keep it as a URL query and it's more revealing.
I'm trying to create a website with articles. I have a page that displays a list of all the articles, and I try to do one that displays the detail of an article. I use angular.js to get the json of my datas. I don't have any problem to get the list of my articles since I only need to do :
function ArticleListCtrl($scope, $http) {
$http.get('/articles/?format=json').success(function(data) {
$scope.articles = data;
});
}
But now I only want to access for example the article with id 4. How do I do that ? Is there a way to inject the primary key entered in the url into the javascript ? I'm new to angular, and I'm pretty sure there is an easy way!
If I understand correctly, what you need is to define a partial template and a route,
for the detail view of your article.
An example is here
More specifically what you'd need is something like the following.
angular.module('myapp', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/articles/:articleId', {templateUrl: 'partials/article-detail.html', controller: ArticleDetailCtrl}).
otherwise({redirectTo: '/articles'});
}]);
What the above does, is to hijack urls of the form /articles/5/ and instead of actually
performing that GET request to your server, it will just ask for partials/article-detail.html. This of course will be your article detail template, which will be handled
by your ArticleDetailCrtl controller.
In your ArticleDetailCrtl controller function, don't forget to include the $routeParams
service. This will give you access to the url parameters, such as articleId, which we
defined above.
The final thing to do is to generate these links in your article list template. e.g:
<ul>
<li ng-repeat="article in articles">{{article.title}}
</ul>
I'm building a Blog in Django (using Generic Views) and I use the same template for both my date based and list detail views. I'm trying to setup pagination, but I want to do so with URL patterns rather than using an ugly ?page=1 url suffix.
The problem is in the actual html template, I cannot find a way to determine which view was used to render the page, so while I have access to all the pagination stuff, I have no way to generate the appropriate URL.
In other words, if the view was rendered by my archive_month(request, month, year, page=0) view, I would need to structure the URL for the next and previous pages as /blog/dec/2009/PageX/, versus the blog index, which would mean the URL would be /blog/pageX/.
Well I just realized that date_based generic views don't support pagination, so problem solved.