Computeds!

Computeds!

by db_dev

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
    <div class="row">
        <div class="col">

            <h3>Number selected: <span data-bind="text: $data.numberSelected()"></span></h3>

            <ul class="list-group mb-3">
                <li class="list-group-item list-group-item-action list-group-item-primary">
                    <div class="form-check">
                        <!-- All Selected -->
                        <input class="form-check-input" type="checkbox" value="" data-bind="checked:$data.allSelected">
                        <label class="form-check-label">Check All</label>
                        <span class="float-right">Number of Items: <span data-bind="text: $data.myCounter()"></span></span>
                    </div>
                </li>

                <!-- ko foreach: { data: $data.items(), as: '$item' } -->
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    <input type="checkbox" data-bind="checked: $data.selected" /> Item Number

                    <span class="badge badge-primary badge-pill" data-bind="text:$data.myItem"></span>
                </li>
                <!-- /ko -->
            </ul>


            <button class="btn btn-info" data-bind="click: function() { $data.add(); }">Add List Item</button>

            <p>

            </p>
        </div>

    </div>
</div>

JavaScript

function viewModel() {
    var self = this;

    self.counter = 0;
    self.selectedItems = ko.observableArray();
    self.items = ko.observableArray();


    self.allSelected = ko.computed({
        read: function() {
            // Added Check so that initial load doesn't check all
            if (self.items().length == 0) {
                return false
            } else {
                var result = self.items().length === self.selectedItems().length;
            }

            return result;
        },
        // This value gets passed as "newValue"?
        write: function(newValue) {
            // This argument passed to the parameter is calculated by the binding type. So, in this case,
            // it evaluates whether the checkbox is checked or not!
            if (newValue) {
                console.log("NewValue = " + newValue);

                // Add copy of selected items to selectedItems array
                self.selectedItems(self.items().slice(0));

            } else {
                // If false, remove all copies of array from selectedItems array
                self.selectedItems.removeAll();
            }
        }
    });

    // Just returns the number of Items selected to Header text data
    self.numberSelected = ko.computed(function() {
        return self.selectedItems().length;
    });
	
    // Returns number of items
    self.myCounter = ko.computed(function() {
        return self.items().length;
    });

    // Fires each time add Button is clicked
    self.add = function() {
        // Adds + 1 to counter, but I don't know what body is.
        var item = {
            myItem: self.counter++
        }
        /*item.selected = ko.computed({
            read: function() {
                return self.selectedItems.indexOf(item) > -1;
            },
            write: function(newValue) {
                if (newValue) {
                    self.selectedItems.push(item);
                } else {
                   ...