http://stackoverflow.com/questions/43208928/knockout-custom-components-not-updating

by jlspake

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<div>
  <rotate style="width: 50px; position: absolute; left: 100px;text-align:center" params="{values: Helper.GetWeatherByFlight($data.testdata, 'Hi')}"></rotate>
  <br/>  <br/>

  <!--<span data-bind="component: {name: 'rotate', params: {values: Helper.GetWeatherByFlight($data.testdata, 'Hi')}}"></span>-->
</div>

JavaScript

var viewModel = function(){
		var self = this;
    this.testdata = ko.observableArray([300, 400, 500]);
    
    setTimeout(function(){
      	self.testdata.push('600');
    }, 1000);
}

window.Helper = {
	GetWeatherByFlight: function(data, msg){
    return data().map(function(item){
    	return item + ': ' + msg;
    });
  },
  GetValue: function(value, element){
  	return value;
  }
}

var m_counter = 10;

ko.components.register('rotate', {
    viewModel: function (params) {
    		var self = this;
        this.inputValues = params.values; //ko.isObservable(params.values) ? params.values() : params.values;
        this.MyClass = ko.observable("");
        
        this.values = ko.computed(function(){
        		var values = [];
            var length = ko.unwrap(self.inputValues).length;
            self.MyClass(length > 1 ? "fade-effect" : "");
            if (length >= 1) {
                var index = m_counter % length;
                $.each(ko.unwrap(self.inputValues), function (i, value) {
                    var opacity = (index == i) ? 1 : 0.25;
                    values.push({ value: value, opacity: opacity });
                });
            }
            return values;
        });
    },
    template: '<span style="position:relative;" data-bind="foreach: values, attr: { class: MyClass }">\
                    <span data-bind="text: Helper.GetValue(value, $element), style: {opacity: opacity}"></span><br/>\
                </span>'
});

ko.applyBindings(new viewModel());