2

特定のオプションでマウスオーバーしたときに、選択値に基づいてタイトル（ウォーク、ラン、トーク）を表示したい。

ヒア・イズ・マイ・フィドル

これはノックアウトのバグですか (または) 私のやり方が間違っていますか?

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());

どんな助けもかなりのものです

4

2 に答える 2

3

生成された要素に追加の属性が必要optionsな場合は、バインディングを使用できませんoptions。「手動で」実行する必要があります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現在選択されている要素の a も表示する場合は、からタイトルを計算する計算されたオブザーバブルが必要になり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のデモ。

于 2013-02-25T10:11:28.497 に答える