hncl
hncl

Reputation: 2305

Knockout arrayFilter

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

Answers (0)

Related Questions