KnockoutJS：select 带有背景图片的选项
KnockoutJS: select option with a background image
我的代码目前看起来像这样：
<select data-bind="foreach: fonts,
optionsValue: 'id', value: activeModel().operations()[0].fonts_id, style: { backgroundImage: 'url(\'' + '/images/fontthumbs/' + '2' + '.png' + '\')' } "
class="designer-font font-select"
>
<option data-bind="value: id, text: alias,
style: {backgroundImage: 'url(\'' + '/images/fontthumbs/' + id + '.png' + '\')' }"></option>
</select>
但我注意到背景图片不适用于 select/option 标签。我已经找到了很多在普通 JS、React 等中解决它的方法，但我不熟悉 Knockout js。我想知道如何解决它？有什么方法可以创建一个简单的下拉菜单，在显示背景图像的同时执行相同的行为？
谢谢！
编辑：字体看起来像这样：
<script type="application/json" id="fonts">
[{"name":"1 BigCheese DNA","alias":"1 BigCheese DNA","id":94},{"name":"A Charming Font Expanded","alias":"A Charming Font","id":1},{"name":"a Papa","alias":"a Papa","id":2},{"name":"Aardvark Cafe","alias":"Aardvark Cafe","id":3},{"name":"Accidental Presidency","alias":"Accidental Presidency","id":95},{"name":"Action Is, Shaded JL","alias":"Action Is","id":4},{"name":"Action Jackson","alias":"Action Jackson","id":98},{"name":"Action Man","alias":"Action Man","id":97},{"name":"ActionIs","alias":"ActionIs","id":155},{"name":"Adventure","alias":"Adventure","id":154},{"name":"Advert","alias":"Advert","id":255},{"name":"African","alias":"African","id":8},{"name":"Airstream","alias":"Airstream","id":96},{"name":"akaHoggle","alias":"akaHoggle","id":189},{"name":"Aklatanic TSO","alias":"Aklatanic TSO","id":236},{"name":"Aladdin","alias":"Aladdin","id":9},{"name":"Albertus Medium","alias":"Albertus Medium","id":41},{"name":"Allstar","alias":"Allstar","id":160},{"name":"Arabolical","alias":"Arabolical","id":215},{"name":"Arial","alias":"Arial","id":5},{"name":"Arial Black","alias":"Arial Black","id":6},{"name":"Army","alias":"Army","id":42},{"name":"Arnold 2.1","alias":"Arnold 2.1","id":162},{"name":"ArtBrush","alias":"ArtBrush","id":43},{"name":"ArtScript","alias":"ArtScript","id":44},{"name":"Asenine","alias":"Asenine","id":170},{"name":"ATROX","alias":"ATROX","id":258},{"name":"Babycakes","alias":"Babycakes","id":99},{"name":"Back to the future 2002","alias":"Back to the future","id":7},{"name":"Balloon XBd BT","alias":"Balloon XBd BT","id":259},{"name":"BastardusSans","alias":"BastardusSans","id":172},{"name":"Bauhaus 93","alias":"Bauhaus 93","id":74},{"name":"Baveuse","alias":"Baveuse","id":190},{"name":"Big Fish Ensemble","alias":"Big Fish Ensemble","id":191},{"name":"Bitchin","alias":"Bitchin","id":275},{"name":"BlackCastleMF","alias":"BlackCastleMF","id":101},{"name":"Blades","alias":"Blades","id":50},{"name":"Blair Caps","alias":"Blair Caps","id":156},{"name":"Bodoni MT","alias":"Bodoni MT","id":46},{"name":"Bombardier","alias":"Bombardier","id":206},{"name":"Bonzai","alias":"Bonzai","id":150},{"name":"Book Antiqua","alias":"Book Antiqua","id":133},{"name":"Bookman Old Style","alias":"Bookman Old Style","id":105},{"name":"BorisBlackBloxx","alias":"BorisBlackBloxx","id":174},{"name":"Bosox","alias":"Bosox","id":161},{"name":"Boston Traffic","alias":"Boston Traffic","id":207},{"name":"Boulder","alias":"Boulder","id":54},{"name":"BranchingMouse Becker","alias":"BranchingMouse Becker","id":192},{"name":"Brie Light","alias":"Brie Light","id":175},{"name":"Britannic Bold","alias":"Britannic Bold","id":134},{"name":"Broadway","alias":"Broadway","id":130},{"name":"BrockScript","alias":"BrockScript","id":102},{"name":"Buffied","alias":"Buffied","id":103},{"name":"Bungnipper","alias":"Bungnipper","id":194},{"name":"Burton\u0027s Nightmare","alias":"Burton\u0027s Nightmare","id":104},{"name":"Cairo","alias":"Cairo","id":48},{"name":"CargoCrate","alias":"CargoCrate","id":57},{"name":"Castellar","alias":"Castellar","id":135},{"name":"CAVIL","alias":"CAVIL","id":136},{"name":"CelticHand","alias":"CelticHand","id":106},{"name":"Centabel Book","alias":"Centabel Book","id":75},{"name":"Century","alias":"Century","id":137},{"name":"Century Gothic","alias":"Century Gothic","id":138},{"name":"Champagne","alias":"Champagne","id":58},{"name":"ChanticleerRoman","alias":"ChanticleerRoman","id":181},{"name":"CHARK","alias":"CHARK","id":139},{"name":"Cheeseburger","alias":"Cheeseburger","id":49},{"name":"Cheri","alias":"Cheri","id":195},{"name":"Cherish","alias":"Cherish","id":116},{"name":"Chicago","alias":"Chicago","id":131},{"name":"Chilled","alias":"Chilled","id":203},{"name":"China Town","alias":"China Town","id":151},{"name":"Chinese Takeaway","alias":"Chinese Takeaway","id":256},{"name":"ChopinScript","alias":"ChopinScript","id":51},{"name":"Chow Fun","alias":"Chow Fun","id":152},{"name":"Cleopatra","alias":"Cleopatra","id":182},{"name":"Coke 11","alias":"Coke 11","id":250},{"name":"Comic Sans MS","alias":"Comic Sans MS","id":53},{"name":"Contra","alias":"Contra","id":246},{"name":"LHF Convecta Base","alias":"Convecta Base","id":112},{"name":"Convoy","alias":"Convoy","id":107},{"name":"Cookies","alias":"Cookies","id":237},{"name":"Copperplate Gothic Bold","alias":"Copperplate Gothic Bold","id":78},{"name":"Corinthia","alias":"Corinthia","id":117},{"name":"Courier New","alias":"Courier New","id":141},{"name":"Cowboys","alias":"Cowboys","id":209},{"name":"Curlz MT","alias":"Curlz MT","id":47},{"name":"Day Roman","alias":"Day Roman","id":247},{"name":"DayPosterBlack","alias":"DayPosterBlack","id":239},{"name":"Deng Thick","alias":"Deng Thick","id":153},{"name":"Derby","alias":"Derby","id":132},{"name":"Desyrel","alias":"Desyrel","id":118},{"name":"Deutsch Gothic","alias":"Deutsch Gothic","id":214},{"name":"Dinosaur Jr","alias":"Dinosaur Jr","id":52},{"name":"Diogenes","alias":"Diogenes","id":220},{"name":"DomDiagonal Bd BT","alias":"DomDiagonal Bd BT","id":260},{"name":"Eastwood","alias":"Eastwood","id":210},{"name":"Edmunds Distressed","alias":"Edmunds Distressed","id":211},{"name":"Edwardian Script ITC","alias":"Edwardian Script ITC","id":108},{"name":"Elephant","alias":"Elephant","id":140},{"name":"English","alias":"English","id":109},{"name":"Eras Bold ITC","alias":"Eras Bold ITC","id":79},{"name":"Eras Demi ITC","alias":"Eras Demi ITC","id":80},{"name":"Eurostar","alias":"Eurostar","id":261},{"name":"Eurostile","alias":"Eurostile","id":128},{"name":"Evil Dead","alias":"Evil Dead","id":59},{"name":"FashionVictim","alias":"FashionVictim","id":142},{"name":"FightThis","alias":"FightThis","id":157},{"name":"Firestarter","alias":"Firestarter","id":262},{"name":"Flame","alias":"Flame","id":61},{"name":"FlamencoD","alias":"FlamencoD","id":263},{"name":"FM College Team","alias":"FM College Team","id":228},{"name":"Font Shui","alias":"Font Shui","id":216},{"name":"Fontdinerdotcom","alias":"Fontdinerdotcom","id":196},{"name":"Foo","alias":"Foo","id":197},{"name":"Forte","alias":"Forte","id":88},{"name":"Franklin Gothic Book","alias":"Franklin Gothic Book","id":143},{"name":"Franklin Gothic Demi Cond","alias":"Franklin Gothic Demi Cond","id":69},{"name":"Freebooter Script","alias":"Freebooter Script","id":81},{"name":"FuturaBlack BT","alias":"FuturaBlack BT","id":127},{"name":"Garamond","alias":"Garamond","id":60},{"name":"Georgia","alias":"Georgia","id":144},{"name":"GeoSlab703 XBdIt BT","alias":"GeoSlab703 XBdIt BT","id":264},{"name":"Ghostbusters","alias":"Ghostbusters","id":67},{"name":"Gill Sans MT","alias":"Gill Sans MT","id":62},{"name":"Godzilla","alias":"Godzilla","id":163},{"name":"Good Times","alias":"Good Times","id":265},{"name":"Goudy Old Style","alias":"Goudy Old Style","id":68},{"name":"Gourmand","alias":"Gourmand","id":145},{"name":"Aristarcoj","alias":"Greek Alphabet","id":92},{"name":"Gunship","alias":"Gunship","id":266},{"name":"Harlow Solid Italic","alias":"Harlow Solid Italic","id":267},{"name":"Heather","alias":"Heather","id":224},{"name":"Swis721 Cn BT","alias":"Helvetica Cn","id":63},{"name":"Roadgeek 2005 Series B","alias":"Highway","id":93},{"name":"Impact","alias":"Impact","id":70},{"name":"Imperator","alias":"Imperator","id":183},{"name":"Impossible - 0","alias":"Impossible - 0","id":82},{"name":"Incised901 NdIt BT","alias":"Incised901 NdIt BT","id":268},{"name":"IndieStar BB","alias":"IndieStar BB","id":119},{"name":"INVADER","alias":"INVADER","id":164},{"name":"JaguarJC","alias":"JaguarJC","id":253},{"name":"Juliet","alias":"Juliet","id":227},{"name":"Kaiser","alias":"Kaiser","id":208},{"name":"Kenyan Coffee","alias":"Kenyan Coffee","id":241},{"name":"Konfuciuz","alias":"Konfuciuz","id":217},{"name":"Kunstler Script","alias":"Kunstler Script","id":110},{"name":"LaffRiotNF","alias":"LaffRiotNF","id":198},{"name":"Lilith","alias":"Lilith","id":185},{"name":"LondonTwo","alias":"LondonTwo","id":242},{"name":"MadisonSquare","alias":"MadisonSquare","id":205},{"name":"Mail Ray Stuff","alias":"Mail Ray Stuff","id":199},{"name":"Ming Imperial","alias":"Ming Imperial","id":257},{"name":"Mistral","alias":"Mistral","id":84},{"name":"MKAbel","alias":"MKAbel","id":243},{"name":"MKBritishWriting","alias":"MKBritishWriting","id":225},{"name":"MLB Astros","alias":"MLB Astros","id":244},{"name":"Mobsters","alias":"Mobsters","id":71},{"name":"Monotype Corsiva","alias":"Monotype Corsiva","id":254},{"name":"MR Chisel Eight Regular","alias":"MR Chisel Eight Regular","id":229},{"name":"MR Chisel Five Regular","alias":"MR Chisel Five Regular","id":230},{"name":"MR Chisel Four Regular","alias":"MR Chisel Four Regular","id":85},{"name":"MR Chisel One Regular","alias":"MR Chisel One Regular","id":232},{"name":"MR Chisel Two Regular","alias":"MR Chisel Two Regular","id":234},{"name":"MRChiselSixRegular","alias":"MRChiselSixRegular","id":235},{"name":"Nationalyze","alias":"Nationalyze","id":269},{"name":"Dearest","alias":"Old English","id":55},{"name":"Old English Text MT","alias":"Old English Text MT","id":274},{"name":"Old London","alias":"Old London","id":251},{"name":"OldStyle 1","alias":"OldStyle 1","id":187},{"name":"OptimusPrinceps","alias":"OptimusPrinceps","id":89},{"name":"Papyrus","alias":"Papyrus","id":91},{"name":"Patrick","alias":"Patrick","id":212},{"name":"Pegasus","alias":"Pegasus","id":221},{"name":"Persimmon","alias":"Persimmon","id":120},{"name":"Pharmacy","alias":"Pharmacy","id":121},{"name":"Pointed Brush","alias":"Pointed Brush","id":122},{"name":"PompejiPetit","alias":"PompejiPetit","id":222},{"name":"Poor Richard","alias":"Poor Richard","id":83},{"name":"Poster","alias":"Poster","id":149},{"name":"POSTOFFICE","alias":"POSTOFFICE","id":249},{"name":"Pottery Barn","alias":"Pottery Barn","id":123},{"name":"Powerpuff","alias":"Powerpuff","id":165},{"name":"LHF Quantum Reg","alias":"Quantum Reg","id":115},{"name":"QuigleyWiggly","alias":"QuigleyWiggly","id":226},{"name":"Rage Italic","alias":"Rage Italic","id":87},{"name":"LHF Ragged Brad","alias":"Ragged Brad","id":113},{"name":"Ren \u0026 Stimpy","alias":"Ren \u0026 Stimpy","id":166},{"name":"Revue BT","alias":"Revue BT","id":270},{"name":"Rockford","alias":"Rockford","id":124},{"name":"Rockwell","alias":"Rockwell","id":147},{"name":"Royal Acid","alias":"Royal Acid","id":271},{"name":"Samurai","alias":"Samurai","id":218},{"name":"Santana","alias":"Santana","id":179},{"name":"Satyr","alias":"Satyr","id":223},{"name":"Scooby Doo","alias":"Scooby Doo","id":168},{"name":"Scriptina","alias":"Scriptina","id":125},{"name":"SerpentineDBol","alias":"SerpentineDBol","id":86},{"name":"SF Ferretopia","alias":"SF Ferretopia","id":201},{"name":"SF Sports Night NS","alias":"SF Sports Night NS","id":272},{"name":"Shanghai","alias":"Shanghai","id":219},{"name":"Shermlock","alias":"Shermlock","id":200},{"name":"Smallville","alias":"Smallville","id":169},{"name":"Sprague","alias":"Sprague","id":202},{"name":"Spumoni","alias":"Spumoni","id":126},{"name":"LHF Stanford Script","alias":"Stanford Script","id":114},{"name":"Star Jedi","alias":"Star Jedi","id":66},{"name":"Steelfish","alias":"Steelfish","id":180},{"name":"Street Soul","alias":"Street Soul","id":252},{"name":"Subway","alias":"Subway","id":273},{"name":"suede","alias":"suede","id":245},{"name":"Tahoma","alias":"Tahoma","id":129},{"name":"Times New Roman","alias":"Times New Roman","id":90},{"name":"Unofficial BoP Font","alias":"Unofficial BoP Font","id":167},{"name":"Varsity","alias":"Varsity","id":65},{"name":"Verdana","alias":"Verdana","id":64},{"name":"Viking-Normal","alias":"Viking-Normal","id":213},{"name":"Whimsy TT","alias":"Whimsy TT","id":238},{"name":"YellowSubmarine","alias":"YellowSubmarine","id":158},{"name":"Zurich LtCn BT","alias":"Zurich LtCn BT","id":111}]
</script>
也许有更好的解决方案，但是您可以在 Options binding 中使用参数 optionsAfterRender 来修改 <option> 标签：
<select data-bind="
options: fonts,
optionsText: 'name' ,
value: activeModel().operations()[0].fonts_id,
optionsAfterRender: backgroundImage"></select>
backgroundImage(option, item)是view model中定义的函数，获取两个参数：
- 选项是
<option>标签。
- item 是数组中的当前行。第一行将是
{"name":"1 BigCheese DNA","alias":"1 BigCheese DNA","id":94}.
在此功能中，您可以更改背景图片。
// In your question, this array is longer.
let fontsOrigArray =[{"name":"1 BigCheese DNA","alias":"1 BigCheese DNA","id":94},{"name":"A Charming Font Expanded","alias":"A Charming Font","id":1},{"name":"a Papa","alias":"a Papa","id":2},{"name":"Aardvark Cafe","alias":"Aardvark Cafe","id":3},{"name":"Accidental Presidency","alias":"Accidental Presidency","id":95},{"name":"Action Is, Shaded JL","alias":"Action Is","id":4},{"name":"Action Jackson","alias":"Action Jackson","id":98},{"name":"Action Man","alias":"Action Man","id":97},{"name":"ActionIs","alias":"ActionIs","id":155},{"name":"Adventure","alias":"Adventure","id":154},{"name":"Advert","alias":"Advert","id":255},{"name":"African","alias":"African","id":8},{"name":"Airstream","alias":"Airstream","id":96},{"name":"akaHoggle","alias":"akaHoggle","id":189},{"name":"Aklatanic TSO","alias":"Aklatanic TSO","id":236}];
function ViewModel(fontsOrig) {
this.valueSelected = ko.observable(''); // It must be activeModel().operations()[0].fonts_id
this.fonts = fontsOrig;
this.backgroundImage = function(option, item) {
ko.applyBindingsToNode(
option, {
style: {
'background-image': 'url(\'' + '/images/fontthumbs/' + item.id + '.png' + '\')'
}
},
item);
}
}
ko.applyBindings(new ViewModel(fontsOrigArray));
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<select data-bind="options: fonts,
optionsText: 'name' ,
optionsValue: 'id',
value: valueSelected,
optionsAfterRender: backgroundImage"></select>
我的代码目前看起来像这样：
<select data-bind="foreach: fonts,
optionsValue: 'id', value: activeModel().operations()[0].fonts_id, style: { backgroundImage: 'url(\'' + '/images/fontthumbs/' + '2' + '.png' + '\')' } "
class="designer-font font-select"
>
<option data-bind="value: id, text: alias,
style: {backgroundImage: 'url(\'' + '/images/fontthumbs/' + id + '.png' + '\')' }"></option>
</select>
但我注意到背景图片不适用于 select/option 标签。我已经找到了很多在普通 JS、React 等中解决它的方法，但我不熟悉 Knockout js。我想知道如何解决它？有什么方法可以创建一个简单的下拉菜单，在显示背景图像的同时执行相同的行为？
谢谢！
编辑：字体看起来像这样：
<script type="application/json" id="fonts">
[{"name":"1 BigCheese DNA","alias":"1 BigCheese DNA","id":94},{"name":"A Charming Font Expanded","alias":"A Charming Font","id":1},{"name":"a Papa","alias":"a Papa","id":2},{"name":"Aardvark Cafe","alias":"Aardvark Cafe","id":3},{"name":"Accidental Presidency","alias":"Accidental Presidency","id":95},{"name":"Action Is, Shaded JL","alias":"Action Is","id":4},{"name":"Action Jackson","alias":"Action Jackson","id":98},{"name":"Action Man","alias":"Action Man","id":97},{"name":"ActionIs","alias":"ActionIs","id":155},{"name":"Adventure","alias":"Adventure","id":154},{"name":"Advert","alias":"Advert","id":255},{"name":"African","alias":"African","id":8},{"name":"Airstream","alias":"Airstream","id":96},{"name":"akaHoggle","alias":"akaHoggle","id":189},{"name":"Aklatanic TSO","alias":"Aklatanic TSO","id":236},{"name":"Aladdin","alias":"Aladdin","id":9},{"name":"Albertus Medium","alias":"Albertus Medium","id":41},{"name":"Allstar","alias":"Allstar","id":160},{"name":"Arabolical","alias":"Arabolical","id":215},{"name":"Arial","alias":"Arial","id":5},{"name":"Arial Black","alias":"Arial Black","id":6},{"name":"Army","alias":"Army","id":42},{"name":"Arnold 2.1","alias":"Arnold 2.1","id":162},{"name":"ArtBrush","alias":"ArtBrush","id":43},{"name":"ArtScript","alias":"ArtScript","id":44},{"name":"Asenine","alias":"Asenine","id":170},{"name":"ATROX","alias":"ATROX","id":258},{"name":"Babycakes","alias":"Babycakes","id":99},{"name":"Back to the future 2002","alias":"Back to the future","id":7},{"name":"Balloon XBd BT","alias":"Balloon XBd BT","id":259},{"name":"BastardusSans","alias":"BastardusSans","id":172},{"name":"Bauhaus 93","alias":"Bauhaus 93","id":74},{"name":"Baveuse","alias":"Baveuse","id":190},{"name":"Big Fish Ensemble","alias":"Big Fish Ensemble","id":191},{"name":"Bitchin","alias":"Bitchin","id":275},{"name":"BlackCastleMF","alias":"BlackCastleMF","id":101},{"name":"Blades","alias":"Blades","id":50},{"name":"Blair Caps","alias":"Blair Caps","id":156},{"name":"Bodoni MT","alias":"Bodoni MT","id":46},{"name":"Bombardier","alias":"Bombardier","id":206},{"name":"Bonzai","alias":"Bonzai","id":150},{"name":"Book Antiqua","alias":"Book Antiqua","id":133},{"name":"Bookman Old Style","alias":"Bookman Old Style","id":105},{"name":"BorisBlackBloxx","alias":"BorisBlackBloxx","id":174},{"name":"Bosox","alias":"Bosox","id":161},{"name":"Boston Traffic","alias":"Boston Traffic","id":207},{"name":"Boulder","alias":"Boulder","id":54},{"name":"BranchingMouse Becker","alias":"BranchingMouse Becker","id":192},{"name":"Brie Light","alias":"Brie Light","id":175},{"name":"Britannic Bold","alias":"Britannic Bold","id":134},{"name":"Broadway","alias":"Broadway","id":130},{"name":"BrockScript","alias":"BrockScript","id":102},{"name":"Buffied","alias":"Buffied","id":103},{"name":"Bungnipper","alias":"Bungnipper","id":194},{"name":"Burton\u0027s Nightmare","alias":"Burton\u0027s Nightmare","id":104},{"name":"Cairo","alias":"Cairo","id":48},{"name":"CargoCrate","alias":"CargoCrate","id":57},{"name":"Castellar","alias":"Castellar","id":135},{"name":"CAVIL","alias":"CAVIL","id":136},{"name":"CelticHand","alias":"CelticHand","id":106},{"name":"Centabel Book","alias":"Centabel Book","id":75},{"name":"Century","alias":"Century","id":137},{"name":"Century Gothic","alias":"Century Gothic","id":138},{"name":"Champagne","alias":"Champagne","id":58},{"name":"ChanticleerRoman","alias":"ChanticleerRoman","id":181},{"name":"CHARK","alias":"CHARK","id":139},{"name":"Cheeseburger","alias":"Cheeseburger","id":49},{"name":"Cheri","alias":"Cheri","id":195},{"name":"Cherish","alias":"Cherish","id":116},{"name":"Chicago","alias":"Chicago","id":131},{"name":"Chilled","alias":"Chilled","id":203},{"name":"China Town","alias":"China Town","id":151},{"name":"Chinese Takeaway","alias":"Chinese Takeaway","id":256},{"name":"ChopinScript","alias":"ChopinScript","id":51},{"name":"Chow Fun","alias":"Chow Fun","id":152},{"name":"Cleopatra","alias":"Cleopatra","id":182},{"name":"Coke 11","alias":"Coke 11","id":250},{"name":"Comic Sans MS","alias":"Comic Sans MS","id":53},{"name":"Contra","alias":"Contra","id":246},{"name":"LHF Convecta Base","alias":"Convecta Base","id":112},{"name":"Convoy","alias":"Convoy","id":107},{"name":"Cookies","alias":"Cookies","id":237},{"name":"Copperplate Gothic Bold","alias":"Copperplate Gothic Bold","id":78},{"name":"Corinthia","alias":"Corinthia","id":117},{"name":"Courier New","alias":"Courier New","id":141},{"name":"Cowboys","alias":"Cowboys","id":209},{"name":"Curlz MT","alias":"Curlz MT","id":47},{"name":"Day Roman","alias":"Day Roman","id":247},{"name":"DayPosterBlack","alias":"DayPosterBlack","id":239},{"name":"Deng Thick","alias":"Deng Thick","id":153},{"name":"Derby","alias":"Derby","id":132},{"name":"Desyrel","alias":"Desyrel","id":118},{"name":"Deutsch Gothic","alias":"Deutsch Gothic","id":214},{"name":"Dinosaur Jr","alias":"Dinosaur Jr","id":52},{"name":"Diogenes","alias":"Diogenes","id":220},{"name":"DomDiagonal Bd BT","alias":"DomDiagonal Bd BT","id":260},{"name":"Eastwood","alias":"Eastwood","id":210},{"name":"Edmunds Distressed","alias":"Edmunds Distressed","id":211},{"name":"Edwardian Script ITC","alias":"Edwardian Script ITC","id":108},{"name":"Elephant","alias":"Elephant","id":140},{"name":"English","alias":"English","id":109},{"name":"Eras Bold ITC","alias":"Eras Bold ITC","id":79},{"name":"Eras Demi ITC","alias":"Eras Demi ITC","id":80},{"name":"Eurostar","alias":"Eurostar","id":261},{"name":"Eurostile","alias":"Eurostile","id":128},{"name":"Evil Dead","alias":"Evil Dead","id":59},{"name":"FashionVictim","alias":"FashionVictim","id":142},{"name":"FightThis","alias":"FightThis","id":157},{"name":"Firestarter","alias":"Firestarter","id":262},{"name":"Flame","alias":"Flame","id":61},{"name":"FlamencoD","alias":"FlamencoD","id":263},{"name":"FM College Team","alias":"FM College Team","id":228},{"name":"Font Shui","alias":"Font Shui","id":216},{"name":"Fontdinerdotcom","alias":"Fontdinerdotcom","id":196},{"name":"Foo","alias":"Foo","id":197},{"name":"Forte","alias":"Forte","id":88},{"name":"Franklin Gothic Book","alias":"Franklin Gothic Book","id":143},{"name":"Franklin Gothic Demi Cond","alias":"Franklin Gothic Demi Cond","id":69},{"name":"Freebooter Script","alias":"Freebooter Script","id":81},{"name":"FuturaBlack BT","alias":"FuturaBlack BT","id":127},{"name":"Garamond","alias":"Garamond","id":60},{"name":"Georgia","alias":"Georgia","id":144},{"name":"GeoSlab703 XBdIt BT","alias":"GeoSlab703 XBdIt BT","id":264},{"name":"Ghostbusters","alias":"Ghostbusters","id":67},{"name":"Gill Sans MT","alias":"Gill Sans MT","id":62},{"name":"Godzilla","alias":"Godzilla","id":163},{"name":"Good Times","alias":"Good Times","id":265},{"name":"Goudy Old Style","alias":"Goudy Old Style","id":68},{"name":"Gourmand","alias":"Gourmand","id":145},{"name":"Aristarcoj","alias":"Greek Alphabet","id":92},{"name":"Gunship","alias":"Gunship","id":266},{"name":"Harlow Solid Italic","alias":"Harlow Solid Italic","id":267},{"name":"Heather","alias":"Heather","id":224},{"name":"Swis721 Cn BT","alias":"Helvetica Cn","id":63},{"name":"Roadgeek 2005 Series B","alias":"Highway","id":93},{"name":"Impact","alias":"Impact","id":70},{"name":"Imperator","alias":"Imperator","id":183},{"name":"Impossible - 0","alias":"Impossible - 0","id":82},{"name":"Incised901 NdIt BT","alias":"Incised901 NdIt BT","id":268},{"name":"IndieStar BB","alias":"IndieStar BB","id":119},{"name":"INVADER","alias":"INVADER","id":164},{"name":"JaguarJC","alias":"JaguarJC","id":253},{"name":"Juliet","alias":"Juliet","id":227},{"name":"Kaiser","alias":"Kaiser","id":208},{"name":"Kenyan Coffee","alias":"Kenyan Coffee","id":241},{"name":"Konfuciuz","alias":"Konfuciuz","id":217},{"name":"Kunstler Script","alias":"Kunstler Script","id":110},{"name":"LaffRiotNF","alias":"LaffRiotNF","id":198},{"name":"Lilith","alias":"Lilith","id":185},{"name":"LondonTwo","alias":"LondonTwo","id":242},{"name":"MadisonSquare","alias":"MadisonSquare","id":205},{"name":"Mail Ray Stuff","alias":"Mail Ray Stuff","id":199},{"name":"Ming Imperial","alias":"Ming Imperial","id":257},{"name":"Mistral","alias":"Mistral","id":84},{"name":"MKAbel","alias":"MKAbel","id":243},{"name":"MKBritishWriting","alias":"MKBritishWriting","id":225},{"name":"MLB Astros","alias":"MLB Astros","id":244},{"name":"Mobsters","alias":"Mobsters","id":71},{"name":"Monotype Corsiva","alias":"Monotype Corsiva","id":254},{"name":"MR Chisel Eight Regular","alias":"MR Chisel Eight Regular","id":229},{"name":"MR Chisel Five Regular","alias":"MR Chisel Five Regular","id":230},{"name":"MR Chisel Four Regular","alias":"MR Chisel Four Regular","id":85},{"name":"MR Chisel One Regular","alias":"MR Chisel One Regular","id":232},{"name":"MR Chisel Two Regular","alias":"MR Chisel Two Regular","id":234},{"name":"MRChiselSixRegular","alias":"MRChiselSixRegular","id":235},{"name":"Nationalyze","alias":"Nationalyze","id":269},{"name":"Dearest","alias":"Old English","id":55},{"name":"Old English Text MT","alias":"Old English Text MT","id":274},{"name":"Old London","alias":"Old London","id":251},{"name":"OldStyle 1","alias":"OldStyle 1","id":187},{"name":"OptimusPrinceps","alias":"OptimusPrinceps","id":89},{"name":"Papyrus","alias":"Papyrus","id":91},{"name":"Patrick","alias":"Patrick","id":212},{"name":"Pegasus","alias":"Pegasus","id":221},{"name":"Persimmon","alias":"Persimmon","id":120},{"name":"Pharmacy","alias":"Pharmacy","id":121},{"name":"Pointed Brush","alias":"Pointed Brush","id":122},{"name":"PompejiPetit","alias":"PompejiPetit","id":222},{"name":"Poor Richard","alias":"Poor Richard","id":83},{"name":"Poster","alias":"Poster","id":149},{"name":"POSTOFFICE","alias":"POSTOFFICE","id":249},{"name":"Pottery Barn","alias":"Pottery Barn","id":123},{"name":"Powerpuff","alias":"Powerpuff","id":165},{"name":"LHF Quantum Reg","alias":"Quantum Reg","id":115},{"name":"QuigleyWiggly","alias":"QuigleyWiggly","id":226},{"name":"Rage Italic","alias":"Rage Italic","id":87},{"name":"LHF Ragged Brad","alias":"Ragged Brad","id":113},{"name":"Ren \u0026 Stimpy","alias":"Ren \u0026 Stimpy","id":166},{"name":"Revue BT","alias":"Revue BT","id":270},{"name":"Rockford","alias":"Rockford","id":124},{"name":"Rockwell","alias":"Rockwell","id":147},{"name":"Royal Acid","alias":"Royal Acid","id":271},{"name":"Samurai","alias":"Samurai","id":218},{"name":"Santana","alias":"Santana","id":179},{"name":"Satyr","alias":"Satyr","id":223},{"name":"Scooby Doo","alias":"Scooby Doo","id":168},{"name":"Scriptina","alias":"Scriptina","id":125},{"name":"SerpentineDBol","alias":"SerpentineDBol","id":86},{"name":"SF Ferretopia","alias":"SF Ferretopia","id":201},{"name":"SF Sports Night NS","alias":"SF Sports Night NS","id":272},{"name":"Shanghai","alias":"Shanghai","id":219},{"name":"Shermlock","alias":"Shermlock","id":200},{"name":"Smallville","alias":"Smallville","id":169},{"name":"Sprague","alias":"Sprague","id":202},{"name":"Spumoni","alias":"Spumoni","id":126},{"name":"LHF Stanford Script","alias":"Stanford Script","id":114},{"name":"Star Jedi","alias":"Star Jedi","id":66},{"name":"Steelfish","alias":"Steelfish","id":180},{"name":"Street Soul","alias":"Street Soul","id":252},{"name":"Subway","alias":"Subway","id":273},{"name":"suede","alias":"suede","id":245},{"name":"Tahoma","alias":"Tahoma","id":129},{"name":"Times New Roman","alias":"Times New Roman","id":90},{"name":"Unofficial BoP Font","alias":"Unofficial BoP Font","id":167},{"name":"Varsity","alias":"Varsity","id":65},{"name":"Verdana","alias":"Verdana","id":64},{"name":"Viking-Normal","alias":"Viking-Normal","id":213},{"name":"Whimsy TT","alias":"Whimsy TT","id":238},{"name":"YellowSubmarine","alias":"YellowSubmarine","id":158},{"name":"Zurich LtCn BT","alias":"Zurich LtCn BT","id":111}]
</script>
也许有更好的解决方案，但是您可以在 Options binding 中使用参数 optionsAfterRender 来修改 <option> 标签：
<select data-bind="
options: fonts,
optionsText: 'name' ,
value: activeModel().operations()[0].fonts_id,
optionsAfterRender: backgroundImage"></select>
backgroundImage(option, item)是view model中定义的函数，获取两个参数：
- 选项是
<option>标签。 - item 是数组中的当前行。第一行将是
{"name":"1 BigCheese DNA","alias":"1 BigCheese DNA","id":94}.
在此功能中，您可以更改背景图片。
// In your question, this array is longer.
let fontsOrigArray =[{"name":"1 BigCheese DNA","alias":"1 BigCheese DNA","id":94},{"name":"A Charming Font Expanded","alias":"A Charming Font","id":1},{"name":"a Papa","alias":"a Papa","id":2},{"name":"Aardvark Cafe","alias":"Aardvark Cafe","id":3},{"name":"Accidental Presidency","alias":"Accidental Presidency","id":95},{"name":"Action Is, Shaded JL","alias":"Action Is","id":4},{"name":"Action Jackson","alias":"Action Jackson","id":98},{"name":"Action Man","alias":"Action Man","id":97},{"name":"ActionIs","alias":"ActionIs","id":155},{"name":"Adventure","alias":"Adventure","id":154},{"name":"Advert","alias":"Advert","id":255},{"name":"African","alias":"African","id":8},{"name":"Airstream","alias":"Airstream","id":96},{"name":"akaHoggle","alias":"akaHoggle","id":189},{"name":"Aklatanic TSO","alias":"Aklatanic TSO","id":236}];
function ViewModel(fontsOrig) {
this.valueSelected = ko.observable(''); // It must be activeModel().operations()[0].fonts_id
this.fonts = fontsOrig;
this.backgroundImage = function(option, item) {
ko.applyBindingsToNode(
option, {
style: {
'background-image': 'url(\'' + '/images/fontthumbs/' + item.id + '.png' + '\')'
}
},
item);
}
}
ko.applyBindings(new ViewModel(fontsOrigArray));
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<select data-bind="options: fonts,
optionsText: 'name' ,
optionsValue: 'id',
value: valueSelected,
optionsAfterRender: backgroundImage"></select>