Kendo DropDownList MVVM 绑定默认值错误答案

【问题标题】：Kendo DropDownList MVVM Binding Default Value ErrorKendo DropDownList MVVM 绑定默认值错误
【发布时间】：2017-12-25 01:13:46
【问题描述】：

我有以下剑道下拉列表：

<div class="slds-form-element" id="eventSubjectItem" style="text-align: center;">
                    <label class="slds-form-element__label" for="eventSubjectContainer" style="color: white; font-size: 15px;">Choose Event Field To Be Used To Label Event:</label>
                    <div id="eventSubjectBorder" style="border-top: 2px solid #f48942;"></div>
                    <div class="slds-form-element__control">
                        <div id="eventSubjectContainer">
                            <input data-role="dropdownlist" id="eventSubject" data-text-field="commonName" data-value-field="apiName" data-bind="source: eventFields, value: selectedField" style="margin-top: 10px; margin-bottom: 15px;"/>
                        </div>
                    </div>
                </div>

然后是我在javascript中的可观察绑定：

eventSubjectObservable = kendo.observable({
                    selectedField: '{!orgEventLabel}',
                    eventFields: allEventFields,
                    eventLabelChange: function(){
                        console.log(this.get('selectedField'));   
                    }
                });
kendo.bind($('#eventSubject'), eventSubjectObservable);

当试图在我的 html 下拉列表元素中将“事件：{change：eventLabelChange}”添加到数据绑定时，我得到处理程序未定义错误，当它显然是（有趣的是，我有另一个下拉列表与此页面上的一种绑定，与更改事件完美配合...）。

另外...我无法获得默认值。我尝试在绑定后直接在可观察对象之外设置下拉列表值，然后触发更改事件，但什么也没发生。

当 commonName = 'Subject' 和 apiName = 'Subject' 并且我做 dropdownlist.data('kendoDropDownList').value('Subject') 它有 -1 索引，因为它找不到具有该值的项目，即使显然有一个……我真的不明白这个绑定发生了什么。

有谁知道当文本和值字段不是整数而是字符串时如何设置默认值？它显然无法仅弄清楚传递给 value() 的字符串与其中一项的值相同...

【问题讨论】：

标签： javascript mvvm kendo-dropdown kendo-mvvm kendo-observable

【解决方案1】：

使用事件绑定并将更改绑定到 eventLabelChange 方法。还将属性添加为 data-auto-bind=true

&lt;input data-role="dropdownlist" id="eventSubject" data-text-field="commonName" data-value-field="apiName" data-bind="source: eventFields, value: selectedField, events:{change:eventLabelChange}" data-auto-bind="true" style="margin-top: 10px; margin-bottom: 15px;"/&gt;

【讨论】：