綁定Knockout值和輸入元素的值之間的差異

我有一個從JSON對象映射的Knockout對象。該敲除對象的值是綁定到輸入元素的數據。綁定Knockout值和輸入元素的值之間的差異

我也綁定了谷歌的地方自動完成到相同的輸入元素。

敲除對象引用的值告訴我輸入內容的值（未選中，所以它會是'bar'）。

輸入框的值是正確的值（我選擇的位置'Barnet，United Kingdom'）。

下面是一個說明該問題的的jsfiddle ... http://jsfiddle.net/twistedinferno/CPEMk/

爲什麼這兩個值不同，我可以得到所選擇的值作爲我的限值？（優選沒有我的KO對象就需要另一個屬性的）

來源

2012-08-28 orangesherbert

Updated JSFiddle here

這是正常行爲。 Knockout將其值綁定註冊到它知道的事件，如afterkeypress或blur。它無法「檢測」其他框架（例如Google Places API）所做的更改。因此，爲了工作，您需要編寫一些將事件從其他框架推送到Knockout的代碼。

在這種情況下，Google商家信息自動填充API支持place_changed事件。我已將此事件納入更新的小提琴中，以展示一個可行的示例。 See the Google documentation for more information about this event。最重要的位：

google.maps.event.addListener(autocomplete, 'place_changed', function() { 
    var place = autocomplete.getPlace(); 
    koObj.StartDescription(place.formatted_address); 
    koObj.Name(place.name); 
    koObj.Address(place.formatted_address); 
});

但是，如果你打算不止一次使用這個功能，我強烈建議你在custom Knockout binding包裹這種行爲。

Here's an excellent article about custom Knockout bindings。如果您一直滾動到最後一章，您會看到一個包含第三方控件的Knockout綁定示例。你會想要做的谷歌的地方自動完成相同的，所以你可以處理這個控制工作的三個方面：

初始化控制（帶有用於微可選配置選項）
迴應中所做的更新通過設置一個事件處理程序的UI。這是通過圍繞place_changed事件實現的。
響應對視圖模型所做的更新。這可能不是您的場景所必需的。

使用自定義淘汰賽結合會是這個樣子：

<input id="startDescription" type="text" data-bind="googleAutoComplete: StartDescription, googleAutoCompleteOptions: { componentRestrictions: { country: 'uk' } }" />

祝你好運！

來源

2012-08-28 16:07:37

這是偉大的！感謝您的詳細和有趣的迴應。我一定誤解了綁定是如何發生的，我想我假定KO對象的值只是查找綁定控件的值，但是我猜他們必須是分開的。 – orangesherbert

這裏是一個裸露的骨頭定製結合我的情況下，任何人都寫了，這是尋找這樣的：

ko.bindingHandlers.addressAutocomplete = { 
    init: function (element, valueAccessor, allBindingsAccessor) { 
     var value = valueAccessor(), allBindings = allBindingsAccessor(); 

     var options = { types: ['geocode'] }; 
     ko.utils.extend(options, allBindings.autocompleteOptions) 

     var autocomplete = new google.maps.places.Autocomplete(element, options); 

     google.maps.event.addListener(autocomplete, 'place_changed', function() { 
      result = autocomplete.getPlace(); 
      value(result.formatted_address); 
     }); 
    }, 
    update: function (element, valueAccessor, allBindingsAccessor) { 
     ko.bindingHandlers.value.update(element, valueAccessor); 
    } 
};

您可以使用它像這樣：

<input type="text" data-bind="addressAutocomplete: Address" />

或者，如果你想指定Google地方自動填充的選項（例如，將您的搜索限制在一個國家/地區）：

<input type="text" data-bind="addressAutocomplete: Address, autocompleteOptions: { componentRestrictions: { country: 'au' } }" />

希望它有幫助。

（注意我已經在默認情況下限制了我的自動完成的地理編碼類型。）

此外，如果你要綁定的地址的特定組件看到這個要點https://gist.github.com/chadedrupt/5974524

來源

2013-07-11 10:16:59

綁定Knockout值和輸入元素的值之間的差異

回答

相關問題