Using a custom bindingHandler to update width of elements in Knockout.js

问题

I have been trying to create a menu using jQuery and Knockout and I've come up with the following here.

Ideally, when the user selected a new topic I wanted to calculate the new width of all the elements and then expand the width of the newly selected topic with an animation and the previously selected elements would just change their width.

The way I've managed to do it though means all the elements are updated with their width showing. Is there a nice way where I can only animate the newly selected element and just ignore the others?

Currently I'm using a custom binding handler with the following code:

    ko.bindingHandlers.changeWidth = {
  init: function(element, valueAccessor) {
    var value = valueAccessor();
    var width = 960;
    var valueUnwrapped = ko.unwrap(value);

    var newWidth = (960 / valueUnwrapped);
    console.log(newWidth);

    $('.selected').css("width", 0);
    $('.selected').animate({
      width: newWidth
    }, 500);
  }
};

Thank you.

来源：https://stackoverflow.com/questions/38405653/using-a-custom-bindinghandler-to-update-width-of-elements-in-knockout-js