Knockout選項選擇在隱藏/顯示後重新初始化

當使用select和knockouts'選項'綁定時，我看到隱藏select元素並再次顯示時的行爲。Knockout選項選擇在隱藏/顯示後重新初始化

當我在列表中選擇一個選項時，observable被賦予正確的值。但是，當我隱藏選擇的html項目並再次使其可見時，之前選擇的值將會丟失。

對於我的測試我使用下面的HTML模板：

Visible: <input type="checkbox" data-bind="checked: visible" /> 
<!-- ko 'if': visible --> 
<select data-bind="options: options, optionsText: 'name', value: selectedItem"></select> 
<!-- /ko -->

結合

var ViewModel = function() { 
    this.visible = ko.observable(true); 
    this.options = ko.observableArray([ 
    {name: 'A', value: 'A00'}, 
    {name: 'B', value: 'A01'}, 
    {name: 'C', value: 'A02'}, 
    ]); 

     this.selectedItem = ko.computed({ 
     read: function() { 
     console.log("reading value"); 
     }, 
     write: function (newSelection) { 
     console.log("setting value:" + newSelection.value); 
     } 
    }); 
}; 

ko.applyBindings(new ViewModel());

你可以在我的例子上的jsfiddle測試： http://jsfiddle.net/5wZQ2/169/

當您選擇一個值（例如列表中的B），可觀察值將獲取該值。當您取消選中可見並隱藏選擇框並再次使其可見時，它將丟失其所選值並重新初始化爲列表中的第一項。

有人可以解釋這種行爲嗎？

來源

2017-02-08 Consec

是否有一個特定的原因，你需要一個可寫的計算Observable屬性？另外，在計算的observable裏面的'read'函數中，你沒有返回任何值，所以什麼都不會設置。 – Agalo

由於您將select綁定到缺少背景字段的計算器，因此UI無法保存其狀態。通常情況下，您將有一個可觀察的存儲區當前選定的值，並且計算結果僅用於對後臺字段和UI之間的數據執行一些轉換。

如果添加一個observable並將其值傳遞給calculate，那麼select將保存其狀態，並在通過'if'綁定重新添加後重新綁定到最後一個值，因爲它將被重新綁定 - 用observable的保存值初始化。

this._selectedItem = ko.observable(); 

this.selectedItem = ko.computed({ 
    read: function() { 
     console.log("reading value"); 
     return this._selectedItem(); 
    }, 
    write: function (newSelection) { 
     console.log("setting value:" + newSelection.value); 
     this._selectedItem(newSelection); 
    } 
}, this);

在你的例子中根本沒有使用計算的理由。您可以將select與一個普通的observable綁定。

this.selectedItem = ko.observable();

然後，如果您仍然希望將更改記錄到控制檯，則可以對observable使用subscribe方法。

this.selectedItem.subscribe(function(newSelection){ 
    console.log("setting value:" + newValue); 
});

來源

2017-02-08 04:13:54

謝謝。我應該提到我想根據select的新值進行一些更改。但是，這應該只在用戶修改所選值時發生，而不是因爲它正在加載到dom中。使用第二個可觀察值並不能真正解決這個問題，因爲我們仍然不知道是什麼導致了新值的設置。 – Consec

你有沒有嘗試添加observable？我的第一個例子沒有按你的需要工作？如果使用可觀察值綁定到計算的初始負載，則只應按照您的說明接收用戶修改的通知。 –

使用計算的整個要點是將它們與另一個可觀察值結合使用。每個淘汰賽文檔：「這些是依賴於一個或多個其他可觀察的功能，並且只要這些依賴關係發生變化就會自動更新。」 –

如果將if綁定更改爲可見綁定，則會發生預期行爲。在這裏看到你更新的小提琴。 http://jsfiddle.net/5wZQ2/171/

Visible: <input type="checkbox" data-bind="checked: visible" /> 
<div data-bind="visible: visible"> 
<select data-bind="options: options, optionsText: 'name', value: selectedItem"></select> 
</div>

我相信不同的是其中規定

文檔http://knockoutjs.com/documentation/if-binding.html中解釋的。如果扮演了類似的角色，可見約束力。區別在於，可見，包含的標記始終保留在DOM中，並且始終應用了其數據綁定屬性 - 可見綁定僅使用CSS切換容器元素的可見性。但是，if綁定在物理上添加或刪除DOM中的包含標記，並且僅在表達式爲true時纔將綁定應用於後代。

來源

2017-02-08 01:41:17

Knockout選項選擇在隱藏/顯示後重新初始化

回答

相關問題