Add an exciting new element to the array within the DOM using knockout.js

Question

Add an exciting new element to the array within the DOM using knockout.js

Is there a way to make the font color change to red and then back to white when a new item is added to a play by play array using knockout? I know how to achieve this effect on a single property with the provided binding, but I'm unsure of how to do it for a new object being added to the DOM.

ko.bindingHandlers.flash = {

    init: function (element, valueAccessor) {},

    update: function (element, valueAccessor) {

        var updated = valueAccessor().updated;

        if (updated()) {
            $(element).addClass('flash');
            setTimeout(function () {
                $(element).removeClass('flash');
            }, 1000);

            updated(false);
        }
    }
};

CSS

.flash {
    color: red;
    -webkit-transition: color 0.4s ease;
    -moz-transition: color 0.4s ease;
    -o-transition: color 0.4s ease;
    transition: color 0.4s ease;
}

HTML

<div class="accordion-inner period-play-by-play" data-bind="foreach: plays">
                        <div class="play" data-bind="css: {'home-team': $data.IsHomeTeam, 'away-team': !$data.IsHomeTeam, 'modified': $data.isNew}">
                            <b data-bind="text: $data.Time + ' '"></b>
                            <span data-bind="text: $data.Team + ' ' + $root.actionName($data.Action)"></span> 
                            <span data-bind="text: $root.actionTypeName($data.ActionType)"></span>
                            <span>by <i data-bind="text: $data.Name"></i></span>
                            <!-- ko if: $data.Lead != '' -->
                            <div class="pull-right" data-bind="text: $data.Lead"></div>
                            <!-- /ko -->
                        </div>
                    </div>

javascript css knockout.js css-animations

Answer 1

Answer №1

Utilize the afterAdd foreach binding to animate newly added elements without the need for creating custom bindings like flash.

For more information, visit Knockout's documentation on foreach binding.

var vm = {
  plays: ko.observableArray([{
    IsHomeTeam: Math.random() >= 0.5,
    isNew: true,
    Time: new Date().toLocaleString(),
    Team: 'default team',
    Action: 'default action',
    ActionType: 'default action type',
    Name: 'default name',
    Lead: Math.random() >= 0.5
  }]),
  actionName(name) {
    return name;
  },
  actionTypeName(name) {
    return name;
  },
  flashAnimate(element) {
    $(element).addClass('flash');
    setTimeout(function() {
      $(element).removeClass('flash');
    }, 1000);
  },
  addNew(vm) {
    vm.plays.push({
      IsHomeTeam: Math.random() >= 0.5,
      isNew: true,
      Time: new Date().toLocaleString(),
      Team: 'new team',
      Action: 'new action',
      Name: 'new name',
      Lead: Math.random() >= 0.5
    });
  }
};

ko.applyBindings(vm);

.play {
  -webkit-transition: color 0.4s ease;
  -moz-transition: color 0.4s ease;
  -o-transition: color 0.4s ease;
  transition: color 0.4s ease;
  display: flex;
  flex-direction: column;
  margin: 10px;
  padding: 10px;
  border: 1px solid;
}

.flash {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class="accordion-inner period-play-by-play" data-bind="foreach: { data: plays, afterAdd: flashAnimate }">
  <div class="play" data-bind="css: {'home-team': $data.IsHomeTeam, 'away-team': !$data.IsHomeTeam, 'modified': $data.isNew}">
    <b data-bind="text: $data.Time + ' '"></b>
    <span data-bind="text: $data.Team + ' ' + $root.actionName($data.Action)"></span>
    <span data-bind="text: $root.actionTypeName($data.ActionType)"></span>
    <span>by <i data-bind="text: $data.Name"></i></span>
    <!-- ko if: $data.Lead != '' -->
    <div class="pull-right" data-bind="text: $data.Lead"></div>
    <!-- /ko -->
  </div>
</div>
<button style="margin: 0 10px" data-bind="click: addNew">Add New</button>

Answer 2

Utilize the afterAdd foreach binding to animate newly added elements without the need for creating custom bindings like flash.

For more information, visit Knockout's documentation on foreach binding.

var vm = {
  plays: ko.observableArray([{
    IsHomeTeam: Math.random() >= 0.5,
    isNew: true,
    Time: new Date().toLocaleString(),
    Team: 'default team',
    Action: 'default action',
    ActionType: 'default action type',
    Name: 'default name',
    Lead: Math.random() >= 0.5
  }]),
  actionName(name) {
    return name;
  },
  actionTypeName(name) {
    return name;
  },
  flashAnimate(element) {
    $(element).addClass('flash');
    setTimeout(function() {
      $(element).removeClass('flash');
    }, 1000);
  },
  addNew(vm) {
    vm.plays.push({
      IsHomeTeam: Math.random() >= 0.5,
      isNew: true,
      Time: new Date().toLocaleString(),
      Team: 'new team',
      Action: 'new action',
      Name: 'new name',
      Lead: Math.random() >= 0.5
    });
  }
};

ko.applyBindings(vm);

.play {
  -webkit-transition: color 0.4s ease;
  -moz-transition: color 0.4s ease;
  -o-transition: color 0.4s ease;
  transition: color 0.4s ease;
  display: flex;
  flex-direction: column;
  margin: 10px;
  padding: 10px;
  border: 1px solid;
}

.flash {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class="accordion-inner period-play-by-play" data-bind="foreach: { data: plays, afterAdd: flashAnimate }">
  <div class="play" data-bind="css: {'home-team': $data.IsHomeTeam, 'away-team': !$data.IsHomeTeam, 'modified': $data.isNew}">
    <b data-bind="text: $data.Time + ' '"></b>
    <span data-bind="text: $data.Team + ' ' + $root.actionName($data.Action)"></span>
    <span data-bind="text: $root.actionTypeName($data.ActionType)"></span>
    <span>by <i data-bind="text: $data.Name"></i></span>
    <!-- ko if: $data.Lead != '' -->
    <div class="pull-right" data-bind="text: $data.Lead"></div>
    <!-- /ko -->
  </div>
</div>
<button style="margin: 0 10px" data-bind="click: addNew">Add New</button>

Add an exciting new element to the array within the DOM using knockout.js

Answer №1

Similar questions

Sleek transitions for navigating between cells in a data table

Interested in integrating server side JavaScript with your Android application?

Managing JavaScript and AJAX requests in a single thread

Sending a POST request to a PHP file in React: A Step-by-Step Guide

What is the best way to offer compressed files on a webpage for easy extraction by a function and integration with a library?

How to Implement Jquery Confirm in Laravel Form Opening?

How to access additional legend labels in c3.js or billboard.js using JSON data?

How come ng-click isn't triggering in the components' template?

JavaScript code to obscure

What is the best way to have a div gradually glide out (utilizing CSS's transition feature) upon the click of a particular button?

The designation is being acknowledged as a <div>

Slick Slider - Defining the Initial Slide

What's the best way to trigger useEffect whenever a useRef variable gets updated?

Ion-row appears out of frame

What is the best way to horizontally align an element within a Material UI Grid item?

Pressing element against another element

Is there a way to ensure that the images in the slider all remain consistent in size?

Making sure to correctly implement email input fields in HTML5: Surprising behaviors observed with the email input type in the Chrome browser

Upon a successful AJAX post request, the page fails to display

What steps do I need to take to incorporate dialog-polyfill into my React application?