Kendo UI DropdownList绑定Observable且valuePrimitive为false时，如何重置值绑定为null？

当你的DropdownList设置valuePrimitive: false时，绑定的value是数据源里的完整数据对象，而不是data-value-field指定的字段值。要在选择后（比如点击添加按钮）重置下拉列表到初始状态，只需要正确更新Observable对象里的绑定属性即可，具体步骤如下：

1. 补全HTML代码（完善绑定配置） #

首先确保你的DropdownList明确设置了valuePrimitive: false，按钮的enabled绑定也补全：

<select data-role="dropdownlist" 
        data-text-field="name" 
        data-value-field="id" 
        data-option-label="Select to add..." 
        data-bind="source: rootData, value: selectedValue, valuePrimitive: false">
</select>
<button class='add-to-list-button k-button k-add' 
        data-bind="click: add, enabled: selectedValue">
    Add Item
</button>

2. 实现ViewModel逻辑（关键是用set方法重置值） #

在你的Observable ViewModel中，添加add方法，执行完添加操作后，通过set方法将selectedValue设为null——这一步是核心，因为Kendo MVVM需要通过set来触发绑定的自动更新：

var viewModel = kendo.observable({
    // 模拟数据源
    rootData: [
        { id: 1, name: "Item 1" },
        { id: 2, name: "Item 2" },
        { id: 3, name: "Item 3" }
    ],
    // 初始值设为null，对应下拉的默认提示
    selectedValue: null,
    add: function() {
        // 先获取选中的完整对象
        var selectedItem = this.get("selectedValue");
        
        if (selectedItem) {
            // 这里写你的添加逻辑，比如把选中项存入另一个列表
            console.log("Adding selected item:", selectedItem);
            
            // 重置选中值为null，下拉会自动回到"Select to add..."状态
            this.set("selectedValue", null);
        }
    }
});

// 绑定ViewModel到页面
kendo.bind(document.body, viewModel);

关键注意事项 #

• 必须使用this.set("selectedValue", null)，而不是直接赋值this.selectedValue = null：Observable对象的属性只有通过set方法修改时，才会触发MVVM的绑定更新，下拉列表才会同步状态。
• valuePrimitive: false的作用是让绑定的value指向整个数据对象，而不是id字段，所以重置为null后，下拉会正确回到option-label的提示状态。
• 按钮的enabled: selectedValue绑定会自动在选中项存在时启用按钮，无选中项时禁用，符合业务逻辑。

内容的提问来源于stack exchange，提问作者Jeff Wilkerson