將現有的選擇選項綁定到Knockout視圖模型

我對Knockout.js相當陌生，因此這可能是一個愚蠢的問題。將現有的選擇選項綁定到Knockout視圖模型

我在閱讀Bindings文檔，特別是options binding。它說，應用綁定時：

任何以前的選項將被刪除。

有沒有辦法保留現有的選項？

<select data-bind="options: availableOptions, optionsText: 'name', value: selectedOption"> 
    <option value="1">One</option> 
    <option value="2" selected>Two</option> 
</select> 

<script type="text/javascript"> 
    var option = function(name, value) { 
     this.name = name; 
     this.value = value; 
    }; 
    var viewModel = { 
     availableOptions : ko.observableArray([]), 
     selectedOption : ko.observable() 
    }; 
</script>

來源

2012-04-20 DreamSonic

沒有，沒有乾淨的方法來保護它們。但是分解可用選項並不是一個好主意 - 要麼將整個數據放在視圖模型中，要麼放在視圖中，不要混合使用。你爲什麼需要這個「功能」？也許有更好的/更清潔的方式。 – Niko 2012-04-20 16:54:48

我的主要擔憂是性能：動態添加100個項目而不是使用已經渲染的項目似乎不是一個好主意。特別是在像手機這樣的低功耗場景中。 – DreamSonic 2012-04-20 18:05:22

當它成爲一個問題時，可能會擔心性能......此外，選擇框中的100個項目也不是完全理想的。 – 2012-10-10 19:24:10

根據Niko的建議，我想答案是最好避免將聲明性綁定與靜態數據混合在一起。如果視圖不太可能發生變化，則將數據放入視圖中（select上的選項元素）。如果它是動態的，則將數據放入KO視圖模型中。

我的方案是前者：

<select data-bind="value: selectedOption"> 
    <option value="1">One</option> 
    <option value="2" selected>Two</option> 
</select> 

<script type="text/javascript"> 
    var viewModel = { 
     selectedOption : ko.observable() 
    }; 
</script>

來源

2012-04-21 19:33:12 DreamSonic

你使用了什麼後端？我建議把所有現有的選項放入json對象並填充視圖模型http://knockoutjs.com/documentation/plugins-mapping.html

來源

2012-04-20 17:24:37

後端在這裏不是問題，這是純粹的客戶端問題。（我使用ASP.NET MVC3） – DreamSonic 2012-04-20 18:07:35

我想知道你是否使用.net或ruby。使用json.net http://json.codeplex.com/創建一個json對象來填充你的viewmodel。這將以您選擇列表所需的方式工作。 – 2012-04-20 19:39:11

我認爲傑森的觀點是有另一種方式來做到這一點。從服務器提供選項讓您不用擔心它們是否是靜態的，視圖是愚蠢的，只是顯示了它給出的選項。視圖模型也以相同的方式對這些選項執行操作。如果以後這些選項需要更改，那麼您的服務器端代碼就是需要更改的所有內容。 – 2012-10-10 19:22:08

將現有的選擇選項綁定到Knockout視圖模型

回答

相關問題