淘汰自定义组件不更新答案

【问题标题】：Knockout custom components not updating淘汰自定义组件不更新
【发布时间】：2017-04-05 00:50:21
【问题描述】：

我有一个自定义组件，它使用函数来传递参数。在这种情况下，可观察值（$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>

这是组件：

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>'
});

我希望能够使用第二种格式，但现在我坚持使用第一种。有什么我可以改变的，无论是在组件中，还是在调用组件的方式中，所以让这两种格式都正确更新？我意识到这是一种非常规的用法。

【问题讨论】：

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

标签： knockout.js

【解决方案1】：

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

旋转组件本身不会将您的参数视为可观察的，它只是查看未包装的值，因此没有什么可以告诉它刷新其视图。您需要重写组件视图模型以使用可观察对象和计算属性，以便它可以对数据的变化做出反应。

类似这样的：

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;
    });
},

【讨论】：