KnockoutJS binding change event to two or more form property

我是KnockoutJS的新手，所以請原諒我的新手問題。KnockoutJS binding change event to two or more form property

我有一個自定義UI控件（下拉列表），其中包含兩個值更新兩個表單屬性。第一個屬性是「ID」，第二個屬性是「Type」。

Example of Drop-down values: 
("ID", "Type") *each drop-down options has two property, ID and Type* 
("A1", "Car") 
("B3", "Bike")

在窗體我有

<form id="abc-form" data-bind="event: { change: save }"> 
    <input type="hidden" name="ID" value="" data-bind="value: ID"/> 
    <input type="hidden" name="Type" value="" data-bind="value: Type"/> 
</form>

我做了控制，因此，如果對其中的一個選項，用戶點擊。它會更新隱藏的輸入，並觸發更改事件，所以KnockoutJS將調用保存功能向服務器發送保存請求。

如果我只有「ID」或「type」，我無法保存。我需要有一對「ID」和「類型」。

如果我使用它來檢測單個屬性的更改，我的事件綁定工作正常。但是我不能同時使用KnockoutJS更新兩個屬性。我一直只獲得「ID」財產填補。

$("input#ID").val("A1") 
$("input#Type").val("Car") 
$("input#ID").trigger("change")

我試過很多的組合，但它似乎只KnockoutJS改變我改變事件觸發的屬性，在上面的例子中只會有漫天的ID屬性。

有沒有辦法使用KnockoutJS來填充兩個屬性併發送保存請求？

我非常喜歡KnockoutJS，因爲它非常優雅，乾淨。

來源

2013-07-22 strike_noir

好吧，淘汰賽已經嵌入了變化事件。只需使用observables即可。

var selected = ko.observable();

然後在select

<select data-bind="value: selected">

然後，訂閱變化

var id = ko.observable(); 
selected.subscribe(function(newval){ 
    // newval is the ID 
    id(newval); 
});

從這裏出發，根據您的訂閱功能得到了ID，預填充隱藏輸入字段再次，最好也用上述示例的可觀察物&低於

<input type="hidden" name="ID" data-bind="value: id" />

我遺漏了type因爲我不知道從哪裏得到數據。不管怎麼說，得到基於subscribe function的ID的type，並做相同的type與ID

來源

2013-07-22 08:43:11

我試着訂閱屬性，但它給了我太多的遞歸錯誤。如果我沒有完全編寫代碼，我非常抱歉，我已經爲您添加了更多的細節 –

您可以綁定到虛擬機的一些屬性都輸入。在虛擬機中，我們可以有一個selected屬性將被綁定下拉框和selectedType，每次從下拉列表中更改selected。

重要的是要明白，類型未綁定在下拉列表中，所以我們應該通過查找items陣列中具有相同標識的項目來查找類型。

查看：

<input type="hidden" name="ID" data-bind="value: selected"/> 
<input type="hidden" name="Type" data-bind="value: selectedType"/> 
<select data-bind="options: items, value: selected, optionsText: 'type', optionsValue: 'id'">

VM：

var items = ko.observableArray([{ id: 'A1' , type: 'Car' },{ id: 'B3' , type: 'Bike' } ]); 
ver selected = ko.observable(); 
var selectedType = ko.observable(); 
selected.subscribe(function(id){ 
    var item = $.grep(items(), function(i){ return i.id == id; }); 
    selectedType(item.type); 
    //Your form submission 
});

來源

2013-07-22 09:18:53 margabit

KnockoutJS binding change event to two or more form property

回答

相關問題