Knockout.js 淘汰未更新的自定义组件

我有一个自定义组件，它使用函数传递参数。在这种情况下，可观察值（$data）没有改变，但函数使用了另一个可观察值（正在改变）和一个哈希表（正在改变，但不能被改变）

当我使用以下语法时，显示会更新：

        <span style="width: 50px; position: absolute; left: 1100px;text-align:center" data-bind="component: {name: ''rotate'', params: {values: Helper.GetWeatherByFlight($data, ''Hi'')}}"></span>

        <rotate style="width: 50px; position: absolute; left: 1100px;text-align:center" params="{values: Helper.GetWeatherByFlight($data, ''Hi'')}"></rotate>

但当我使用以下语法时，它不会更新：

        <span style="width: 50px; position: absolute; left: 1100px;text-align:center" data-bind="component: {name: ''rotate'', params: {values: Helper.GetWeatherByFlight($data, ''Hi'')}}"></span>

        <rotate style="width: 50px; position: absolute; left: 1100px;text-align:center" params="{values: Helper.GetWeatherByFlight($data, ''Hi'')}"></rotate>

这是一个组件：

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

ko.components.register（'rotate'）{
viewModel:函数（参数）{
var值=[]；
var inputValues=ko.isObservable（params.values）？params.values（）：params.values；
变量长度=inputValues.length；
this.MyClass=长度>1？“淡入淡出效果”：“；
如果（长度>=1）{
var指数=m_计数器%长度；
$.each（输入值，函数（i，值）{
变量不透明度=（指数==i）？1:0；
push（{value:value，opacity:opacity}）；
});
}
这个值=值；
},
模板：'\
\
'
});

---

我希望能够使用第二种格式，但目前我只能使用第一种格式。我是否可以更改组件中的某些内容，或者组件的调用方式，以便正确更新这两种格式？我意识到这是一种有点非常规的用法。

在第一种情况下，组件刷新的唯一原因是组件绑定正在查找更改，然后在检测到任何更改时重新初始化整个组件

“旋转组件”本身并没有将您的参数视为可观察的，它只是查看未包装的值，因此没有任何信息告诉它刷新其视图。您需要重写组件视图模型，以使用可观察和计算属性，以便它能够对数据中的更改作出反应

大概是这样的：

viewModel: function (params) {
    var self = this;
    this.inputValues = params.values; //preserve the observable instead of unwrapping its values
    this.MyClass = ko.observable("");

    //values is a computed property so that it updates when the dependent observable (inputValues) is modified.
    this.values = ko.computed(function(){
        var values = [];
        //use ko.unwrap to safely handle either case of inputValues being an observable or non-observable.
        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;
                values.push({ value: value, opacity: opacity });
            });
        }
        return values;
    });
},

---

自定义命名组件元素在params=”“属性中不需要大括号。它只是逗号分隔的值，就像在常规的旧数据绑定“”中一样。params=“values:Helper.GetWeatherByFlight（$data，'Hi'）”应该足够了。