Commit 226a7788 authored by alexandre's avatar alexandre
Browse files

Renders a tree using marionette and restframework

parent 1d0a3712
......@@ -21,6 +21,7 @@ from playground import views
router = routers.DefaultRouter()
router.register(r'axis', views.AxisViewSet)
router.register(r'scores', views.ScoreViewSet)
......
# -*- coding: utf-8 -*-
# Generated by Django 1.10.6 on 2017-05-02 10:09
from __future__ import unicode_literals
from django.db import migrations, models
import django.db.models.deletion
class Migration(migrations.Migration):
dependencies = [
('playground', '0003_auto_20170425_0955'),
]
operations = [
migrations.RemoveField(
model_name='score',
name='children',
),
migrations.AddField(
model_name='score',
name='child',
field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, to='playground.Axis'),
),
]
......@@ -15,7 +15,7 @@ class Score(models.Model):
"""docstring"""
title = models.TextField(blank=True)
children = models.ManyToManyField(Axis, blank=True, null=True)
child = models.ForeignKey(Axis, blank=True, null=True)
def __str__(self):
return self.title
from .models import Axis, Score
from rest_framework import serializers
from rest_framework_recursive.fields import RecursiveField
class AxisSerializer(serializers.HyperlinkedModelSerializer):
id = serializers.ReadOnlyField()
# children = axisSerializer()
children = RecursiveField(required=False, allow_null=True, many=True)
class Meta:
model = Axis
......@@ -13,8 +15,8 @@ class AxisSerializer(serializers.HyperlinkedModelSerializer):
class ScoreSerializer(serializers.HyperlinkedModelSerializer):
id = serializers.ReadOnlyField()
children = AxisSerializer(many=True)
child = AxisSerializer()
class Meta:
model = Score
fields = ('id', 'title', 'children')
fields = ('id', 'title', 'child')
......@@ -11,9 +11,8 @@
urlRoot: '/api/scores/',
relations: [{
type: Backbone.HasOne,
key: 'children',
key: 'child',
relatedModel: 'AxisModel',
collectionType: 'AxisCollection',
// reverseRelation: {
// key: 'parent',
// includeInJSON: 'id'
......@@ -40,18 +39,67 @@
model: W.AxisModel
});
W.TreeNode = Backbone.Marionette.View.extend({
tagName: 'li',
template: '#node-template',
regions: {
tree: {
el: 'ul',
replaceElement: true
}
},
onRender: function() {
var children = this.model.get('children');
console.log(this.model.attributes);
//show child nodes if they are present
if (children.length) {
var treeView = new W.TreeView({
collection: children
});
this.showChildView('tree', treeView);
}
}
});
W.TreeView = Backbone.Marionette.CollectionView.extend({
tagName: 'ul',
childView: W.TreeNode
});
W.ScoreView = Backbone.Marionette.View.extend({
el: 'body',
template: _.template('Contents'),
template: '#score-template',
regions: {
firstRegion: 'ul'
},
onRender: function() {
var child = this.model.get("child");
this.showChildView('firstRegion', new W.TreeNode({model: child}));
},
initialize: function() {
this.listenTo(this.model, 'change', this.render);
this.listenTo(this.model, 'sync', this.render);
},
});
var score = new W.ScoreModel({id: 1});
var myView = new W.ScoreView({model: score});
score.fetch();
score.fetch({
success: function(model) {
// console.log(model.get("children"));
}
});
window.myView = myView;
})();
......
......@@ -6,17 +6,26 @@
<title></title>
<script id="score-template" type="text/template">
<h1><%- title %></h1>
<ul></ul>
</script>
<script id="node-template" type="text/template">
<%- title %>
<% if (children.length) { %>
<ul></ul>
<% } %>
</script>
</head>
<body>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.radio/2.0.0/backbone.radio.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.marionette/3.2.0/backbone.marionette.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone-relational/0.10.0/backbone-relational.min.js"></script>
<script src="{% static 'playground/js/models.js' %}"></script>
<!-- <script src="//rawgit.com/ilikenwf/nestedSortable/master/jquery.mjs.nestedSortable.js"></script> -->
<script src="{% static 'playground/js/app.js' %}"></script>
</body>
</html>
from django.views.generic import DetailView
from django.views.generic.base import TemplateView
from rest_framework import viewsets
from .models import Score
from .serializers import ScoreSerializer
from .models import Axis, Score
from .serializers import AxisSerializer, ScoreSerializer
class ScoreViewSet(viewsets.ModelViewSet):
......@@ -13,6 +13,14 @@ class ScoreViewSet(viewsets.ModelViewSet):
serializer_class = ScoreSerializer
class AxisViewSet(viewsets.ModelViewSet):
"""
API endpoint that allows users to be viewed or edited.
"""
queryset = Axis.objects.all()
serializer_class = AxisSerializer
class ScoreDetailView(DetailView):
"""
"""
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment