Reputation: 2305
I am trying to update a progress bar dynamical using knockout3.5, by calculating the number of checked and unchecked checkboxes in a foreach loop table:
<table class="table table-condensed table-striped">
<thead>
<tr>
<th style="text-align:center">Completed</th>
</tr>
</thead>
<tbody data-bind="foreach: { data: toDoItems, as: 'item' }">
<tr>
<td style="width: 10px;text-align:center"> <label><input id="Completed" data-bind="checked: isComplete, click: $root.toggleAssociation" type='checkbox' /><span class='lbl padding-8'></span> </label></td>
</tr>
</tbody>
</table>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="${self.completedPercentage()}" aria-valuemin="0" aria-valuemax="100" style="width: ${self.completedPercentage()}%;">
${self.completedPercentage().toFixed(2)}%
</div>
</div>
Here is the model
var ToDoViewModel = function () {
var self = this;
self.isComplete = ko.observable();
this.toDoItems = ko.observableArray([]);
var item = {
Name: self.Name,
isComplete: self.isComplete,
Client1:self.Client1,
Id: self.Id
};
self.completedPercentage = ko.computed(function () {
var completedCount = ko.utils.arrayFilter(self.toDoItems(), function (item) {
return item.isComplete(true);
}).length;
var totalCount = self.toDoItems().length;
return (completedCount / totalCount) * 100;
});
$.ajax({
type: "Post",
url: '@Url.Action("GetToDoList", "controller")',
dataType: "json",
data: { username: 'uername' },
success: function (result) {
if (result && result.length > 0) {
for (var l = 0; l < result.length; l++) {
self.toDoItems.push({ isComplete: result[l].isComplete3 });
}
};
},
error: function (err) {
alert(err.status + " : " + err.statusText);
}
});
}
window.viewModel = new ToDoViewModel();
ko.applyBindings(window.viewModel);
I get this error message:
item.isComplete is not a function
Upvotes: 0
Views: 12