Knockout自定義組件不更新

我有一個使用函數傳遞參數的自定義組件。在這種情況下，可觀察值（$ data）不會改變，但該函數使用另一個observable（正在改變）和一個哈希表（它正在改變，但不能被觀察到）。Knockout自定義組件不更新

的顯示更新當我使用這個語法：當我使用這個語法

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

我寧願能夠使用第二種格式，但現在我堅持第一種格式。有沒有什麼我可以改變的，無論是在組件中，還是組件被調用的方式，所以使兩種格式都能正確更新？我意識到這是一種非常規的用法。

來源

2017-04-04 Keith

自定義命名的組成元素不需要PARAMS =屬性中「」大括號內。這只是逗號分隔的值，如在常規的舊數據綁定=「」中。「 params =」值：Helper.GetWeatherByFlight（$ data，'Hi'）「應該足夠了。 – Budhead2004

您的組件在第一種情況下刷新的唯一原因是，結合組件正在尋找的變化，然後重新初始化當它檢測到任何整個組件。

的旋轉組件本身像他們觀察到它只是看着展開的值，所以沒有什麼，告訴它刷新自己的觀點並沒有治療的參數。您需要重寫組件視圖模型以使用observables和計算屬性，以便它可以對數據中的更改作出反應。

事情是這樣的：

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

來源

2017-04-04 16:50:21

這個技巧。非常感謝你！ – Keith

@Keith很高興聽到它的幫助。要將答案標記爲已接受，請單擊答案旁邊的複選標記以將其從灰色變爲填充。 –

Knockout自定義組件不更新

回答

相關問題