drop-down-menu - knockout 选择属性 :{title Binding} not working as expected for Observable array

Question

我想在鼠标悬停在特定选项上时根据选择值显示标题(walk,run,talk)。

Here Is my Fiddle

这是 knockout 中的错误吗(或者)我做错了吗？

HTML:-

 <select data-bind="value: activityId,optionsValue: 'id', optionsText: 'name', options: activityArray,optionsCaption:'Select',attr: {title:'name'}">

脚本

 // This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {

var self = this;

self.activityId = ko.observable("");
self.activityArray = ko.observableArray();
self.activityArray.push(new Activity(1,'walk'));
self.activityArray.push(new Activity(2,'run'));
self.activityArray.push(new Activity(3,'talk'));
}
function Activity(id,name){
this.id = id;
this.name = name;
};
// Activates knockout.js
ko.applyBindings(new AppViewModel());

任何帮助都是可观的

Answer 1

如果你想在生成的 options 上有额外的属性您不能使用 options 的元素绑定(bind)你必须用foreach“手动”完成

<select data-bind="value: activityId">   
    <option>Select</option>
    <!-- ko foreach: activityArray -->
    <option data-bind="value: id, text: name, attr: {title: name}"></option>
    <!-- /ko -->
</select>

如果你想显示一个title同样对于当前选定的元素，您将需要一个计算的可观察对象，它根据 activityId 计算标题。 :

self.selectedActivity = ko.computed(function () {        
    var selected = ko.utils.arrayFirst(self.activityArray(), function (item) {
        return item.id == self.activityId()
    });
    if (selected)      
     return selected.name;        
});

然后你可以使用这个selectedActivity在您的选择上:

<select data-bind="value: activityId, attr: {title: selectedActivity}">

演示 JSFiddle .