Инициализация пустой страницы разрыва формы в Knockout.js ⇐ Jquery

[Anonymous]

Using Knockout.js I want to have forms that allow infinite choices, but I need the form to display so the user knows it exist. I'm OK with starting with 3 forms, so I'd like to initialize empty objects when the page renders. По какой-то причине, когда я инициализирую один объект, мой код нарушается:

Код: Выделить всё

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

function TaskListViewModel() {
// Data
var self=this;
self.tasks=ko.observableArray([]);
// self.tasks.push({'title': ''})
self.newTaskText=ko.observable();
self.incompleteTasks=ko.computed(function() {
return ko.utils.arrayFilter(self.tasks(), function(task) {
return !task.isDone()
});
});

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

self.removeTask=function(task) {
self.tasks.destroy(task)
};

self.incompleteTasks=ko.computed(function() {
return ko.utils.arrayFilter(self.tasks(),
function(task) {
return !task.isDone() && !task._destroy
});
});

self.save=function() {
$.ajax(".", {
data: ko.toJSON({
tasks: self.tasks
}),
type: "post",
contentType: "application/json",
success: function(result) {
alert(result)
}
});
};

// load initial state from server, convert to tasks, then add em to self.tasks
$.getJSON(".", function(allData) {
var mappedTasks=$.map(allData, function(item) {
return new Task(item)
});
self.tasks(mappedTasks);
});

self.tasks.push({'title': ''})
}
ko.applyBindings(new TaskListViewModel());

Код: Выделить всё

    body { font-family: Helvetica, Arial }
input:not([type]), input[type=text], input[type=password], select { background-color: #FFFFCC; border: 1px solid gray; padding: 2px; }

.codeRunner ul {list-style-type: none; margin: 1em 0; background-color: #cde; padding: 1em; border-radius: 0.5em;}
.codeRunner ul li a { color: Gray; font-size: 90%; text-decoration: none }
.codeRunner ul li a:hover { text-decoration: underline }
.codeRunner input:not([type]), input[type=text] { width: 30em; }
.codeRunner input[disabled] { text-decoration: line-through; border-color: Silver; background-color: Silver; }
.codeRunner textarea { width: 30em; height: 6em; }
.codeRunner form { margin-top: 1em; margin-bottom: 1em; }

Код: Выделить всё

 Stuff 




[list] 0">
[*]

[url=#]Delete[/url]

[/list]
You have  [/b] incomplete task(s)
 -it 's beer time!

Add

What is the pattern in knockout to initialize safely with this block of JS?


Источник: https://stackoverflow.com/questions/398 ... nockout-js