Building homepage’s WYSIWYG admin with Django and Knockout

Video in TIB AV-Portal: Building homepage’s WYSIWYG admin with Django and Knockout

Formal Metadata

Building homepage’s WYSIWYG admin with Django and Knockout
Title of Series
Part Number
Number of Parts
CC Attribution 3.0 Unported:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
Release Date

Content Metadata

Subject Area
While the front-end of theatlantic was written in PHP up until its recent rewrite, we have relied on a robust Django-powered admin to manage content for nearly two years. At the time when we began coding the redesign we had already developed an adequate solution for curating content into modules on our site: a combination of Grappelli’s drag-and-drop sortable inline feature and django-nested-admin, a project we wrote for nested InlineModelAdmins. However, it soon became clear that our current system would not meet the needs of editors managing The Atlantic’s new responsive and visually-striking homepage. The workflow employed by the editors with our sortable nested inlines—edit, save, preview; adjust, save again, preview; …—would have been too burdensome. This challenge led me to propose we build a new tool that could “live-edit” the homepage in a WYSIWYG interface. It occurred to me that, if we could find a way to bind the ModelAdmin’s formsets to a javascript model, and used one of the many MVC javascript frameworks, we could build the interface using two-way data binding to sync changes with a hidden form. A project that would have taken months could, with the right framework, be built in just a few weeks. So why Knockout.js? I evaluated most of the popular options. Though I initially adopted AngularJS, I later abandoned it because, while it is a fine framework, it is not ideal for integrating with DOM elements that live outside angular. I stumbled through quite a few angular controllers and directives (violating their best practices every step along the way) before changing direction. Knockout, by comparison, turned out to be absolutely perfect for the task at hand. This talk will discuss what was involved in using Knockout to build two-way data binding with django formsets, and how we implemented sorting with drag-and-drop functionality, inline editing of html, and image uploads and cropping. It will also touch briefly on the challenges we faced making everything testable, and feature a live demo of updating homepage using our new modular Django CMS.
Computer animation Observational study Execution unit
Web page Point (geometry) Dialect Group action Service (economics) Random number generation Multiplication sign Gender Execution unit Frequency Computer animation Order (biology) Website Right angle Endliche Modelltheorie Game theory Resultant Reverse engineering
Home page Computer animation Internetworking Gender Model theory 1 (number) Endliche Modelltheorie Quicksort Data structure Mereology
Dependent and independent variables Einheitskugel Model theory Insertion loss Line (geometry) Mereology Number Computer animation Bit rate Term (mathematics) Operator (mathematics) Order (biology) Text editor Office suite Row (database) Physical system
Observational study Uniqueness quantification Multiplication sign Projective plane Model theory Device driver Drop (liquid) Theory Element (mathematics) Arithmetic mean Computer animation Hypermedia Term (mathematics) Well-formed formula Personal digital assistant Operator (mathematics) Phase transition Pattern language Object (grammar) Form (programming)
Functional (mathematics) Computer animation Multiplication sign Core dump Endliche Modelltheorie Surgery Position operator
Area 1 (number) Content (media) Variance Reflexive space Set (mathematics) Maxima and minima Line (geometry) Field (computer science) Medical imaging Word Computer animation Natural number Well-formed formula Personal digital assistant Bridging (networking) Operator (mathematics) Endliche Modelltheorie Object (grammar) Form (programming)
Group action Building Serial port Divisor INTEGRAL Multiplication sign System administrator 1 (number) Set (mathematics) Parameter (computer programming) Mereology Food energy Rule of inference Proper map Theory Revision control Bit rate Well-formed formula Data conversion Endliche Modelltheorie Form (programming) Area File format Expression Model theory Line (geometry) Functional (mathematics) Category of being Data management Computer animation output Pattern language Whiteboard Object (grammar) Quicksort
Process (computing) Forcing (mathematics) Drop (liquid) Endliche Modelltheorie Flow separation
Type theory Medical imaging Operator (mathematics) Multiplication sign Content (media) Client (computing) Order of magnitude Field (computer science)
Covering space Meeting/Interview
Electric generator Computer animation Meeting/Interview Personal digital assistant Instance (computer science) Object (grammar) Mereology Theory Library (computing) Form (programming)
the purpose of study and he and he and and uh all the old In if United Republic and all of the the ability of the government agencies the unit can you that on the 1st of
the that the agrees with their own and read on that illustrates the use In fact have none it so the introduction of what is going on in the middle of the land of not very it's a 1 year old of the publication of the 4 1 years of that in the and you're not really name you may seem of many features such as a the last the regions while still in order to have people so in April of
this year he lost his design site which is in the very long time on the right the the the the back and the point minded gender decided not responsive and later it's less so and of pairs of model of the forums and reply the this really and the group and the as a result of the unit of the in the world what is cancellative period of the 2 people started selected by the age of the random number is in the time of the game and the 3rd for a friend you know some of you in the back of the room of and on a page is most of the data that I also feel that page services in the reverse the brain before the end is on the most the so before the redesign
you may have a look at this of familiar propeller so it's basically in ones the using of a model called Internet in that allows you to try to draw between enhancers and part of the next ones so the only thing that made use only the thing for so the homepage of
fullest sponsored research in gender and regard for a whole lot of structure the latter is that models build a useful and the answer is sort of this chapter of talk that you might see a homepage
and I always use the term is the operating on the on the design of is that there's a row of more of 1 all articles people models because you really arranged order I will be a new thing actually more and more model the loss of the same things that we the 1st is sufficiently flexible the so why
don't you what was the old system of nested in line it's not suffice for the of 1st of all companies increasingly visual the Office of parts the stories in the unit ball of writing out of the range of social they using increases previously with the company created a lot of things so that it stays in your 3 you will be really numbers set of course something that particularly in response to the solution of our editors are perfectionists that's something the rapid rate for the so what is it that we also found that the goal was always leading to the end of each while using much as the possible and so that was the origin briefly about the
same as that and if I don't get out of the here of this allows virtually nothing in 1 pattern and provides a driver of the similar to the elements in run the world I We were taken as the mean for the purpose of the project so that it's the both media studies on it that perform operations on the inside like for ematically rather than them working with a kind of uh but it's based on the images of of the of the of so what
happens when I'm achieve this with you in of a well the Grandpa at the moment because of the long and really at the heart of the stuff but it also mentioned that many of which have but the is it unique gage theory on it and J. that renders all at once and for the also what was using this formula build the case object that's the of the form book that would not have you model for and the ongoing phase and not out on and certainly 1 between the from old and that the same time there are a few of you that we have and that of the bodies in try drop below the user that interact with that you know of the models in terms of understanding the artist and inside of and so this is kind well the now I was talking
about why is not out here but little surgery on so if I have to find the end in divorce didn't have thought about it or if don't you run into the of of this is that these
but anyway position is not out of the will of the of the talk on what I want to use any was 1st about which is that you at the time summary the Bull at functionality for Mandarin reading group and in the end model of the core it is the 1 that's the neuronal on but also a lot so
how do we get from this
operator you get a copy of the genes that the mark on the refresh
the objective of the and has a pretty simple convention for companies formulas and in what the formulas it's just the name of the of the of title that need 1 of the content in foreign lines on it's not that complicated on relating so this case of you that I have this on your model the on the user model and were set to model were set and the depths of were waiting in mind is that and the only 1 that I and this Convention is all areas of the data that many of the the words that he had the images were deemed to more reflexes than you a model of a set of that size of the set of that so here's the variance in whole or in submission bridge of of receiving foreign to us you have and I'm the main field on that so long as forms of maximum forms that there are natural form fields of matching on our that formula yields that tell you how I wanted originally in coming out of the knows which ones should be of the operations and which ones should be in the position and and of you know your model set here at the that the 1st 1 the 2nd 1 was 1 of them in the news and so
you have really for conversion of the syntax of generally performs into different versions of the matter Jason the known ones just matter the property and is the name name on the board online solutions that model versus gas here that the model of the set which is now the right time writing that's your and that the that in 1 of the things that you expressions gets us is that we can compile this expression pattern in each of other until all all the steps of the Urals you undefined 0 you construct red and fill in the other side of the properties with the death of and then I just like conventional need something the matter forms on the go with model separating the different properties that they to be in line with the whole rather than the individual rules in light of the management of forms for energy in the of the such so that all forms of
instead on the serial available to put this on the being mentioned 1 and the models of race and that the object that properties so here is a review of examples the show the profits from start to finish building the model by a so the wire you expressions which actually don't really do it the will of the artist work in general that said 1 of the areas of and obviously I call the of but theory includes all the needs of the group that inverse of but just for administration purposes and 1 of the Muslims was a serious about the version of the angular version and not of the chemicals in reason a rate that will include the protection of all about and so it is or what seems like something that you and it is what of course you would feel compelled expressions the that with the goal of the end parts of the objects of the model that of all that you read it was the 1st 1st the new object and set fire to the of have that that at the time that he had not functions just by the by every way of finding the p for the values of 2 models done by the the so the line and values the bond and 1 on the formula is that pollen not expression building you help people using political not mapping which it allows them to the passenger side of the model are always in sets I and by the way you in which the find all the input the user and at that useful in the form of the link and on with its name and the upon them all and out it and that was actually 1 so here's some data that form the old the of the model was 1st in the format of the model in the form of that so now we have to do with the of you our ability to have a look at it and looking for for me and my coworker with foreign is really skills user-supplied of something to take all different designs of the models and use the exact same parameters so where all the same arguments used every model is just you know you have to know which makes billion not version of the simple and so I used for a wide area of models in the data and have the regional and and that sort of dynamic the amount of what we're always doing it to once we have that not be 1 some of the so integrations with things like seeing for in 1 factor asked to burden and drop them sort of also use giant of rearrange things and I support for another the art world can practice the the neologism proper and this so
the 2 of 3 general of of the whole process the we so this the is severity of the it on mess around the world through shared features that the buildings and and so on and the things on the other we
have something called sat in droppings into force in the data and then my friend and use that in or you rearrange things was dropped was there are anything things like this and that's what little labels call them slightly dropped them to that was a follow-up interview in the whole world where get the on so this we just top model with features from the
magnitudes of the client choose what type content this article in the city
and the the ball the image field of neural and real property automatically to fit the operation of age of when so that the time for us
and that's the end at all of the money on the cover sheet of Mandela and go the a
to see an and these are the things that
you you know it thank you the this a let us in questions
but so long as part of an object which has also been needed in the 1st part of the omelet illustrate the technique of Uganda Library neutral in theory along for instance the case at any 1 nation really which is just a library for removing race of the generation that built in the form of a question that of of each and every 1 you