Simple to-do list as a single page application

I've been doing a simple implementation of a to-do list to learn how to use Knockout.js. I would like a general review of what I've done so far (not much). It's my first application in JavaScript and I've never been very good at Html and CSS, so feel free to give a lot general good things to do, or not to do.

My application is not just one to-do list, you can have multiple lists. There is no back-end for the moment, so there is no save option. I'm wondering if my actual implementation would be difficult to add a back-end service to store information.

I'm using bootstrap as a CSS framework, so my CSS file is really small.



`function Task(data){
this.title = ko.observable(data.title);
this.isDone = ko.observable(data.isDone);
this.editable = ko.observable(false);
}

function ListTask(data){
this.title = ko.observable(data.title);
this.tasks = ko.observableArray([]);
this.editable = ko.observable(false);
}

function ViewModel() {
var self = this;
self.listVisible = ko.observable(true);
self.itemsListVisible = ko.observable(false);
self.listTask = ko.observableArray([]);
self.newTaskText = ko.observable();
self.newListText = ko.observable();
self.allSelected = ko.observable(false);
self.tasks = ko.observableArray([]);

self.addListTask = function(){
self.listTask.push(new ListTask({title: self.newListText()}));
self.newListText("");
};

self.toggleEditableList = function(list){
list.editable(!list.editable());
};

self.showList = function(list){
self.listVisible(false);
self.itemsListVisible(true);
self.tasks(list.tasks());
};

self.backToMenu = function(){
self.listVisible(true);
self.itemsListVisible(false);
self.tasks([]);
};

self.addTask = function(){
self.tasks.push(new Task({title : this.newTaskText()}));
self.newTaskText("");
};

self.remove = function(task){
se

Don't have time to do a full review but you probably want to reorganize your style and script loading. This will allow the browser to download the stylesheets concurrently while downloading+executing your scripts.

Also you probably want to load jQuery before knockout as knockout will delegate to the more robust jQuery method where applicable. In the press release for knockout@3.1 they claim you won't have to load jQuery first. Also note, there's no advantage to loading knockout in head afaik as it won't actually apply the templates (.applyBindings) until the content ready event.

Also you probably want to point to a single version of jQuery to prevent something going awry between jQuery (quite unlikely I guess but worth considering)..

    
    Simple data bind 
    
    
    

    
    
    

StackExchange Code Review Q#43255, answer score: 7