KnockoutJS数据绑定选项

Question

 var vm = { WeatherId: ko.observable(), WeatherConditions: [{ Id: '1', Name: 'Sunny' }, { Id: '2', Name: 'Rainy' }, { Id: '3', Name: 'Cloudy' }, { Id: '4', Name: 'Snowy' }] }; ko.applyBindings(vm); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script> <select data-bind="options: WeatherConditions, value: WeatherId, optionsText:'Name', optionsCaption: 'Select today weather'"> </select> 

I have this KO data bind snippet where I want to set optionsCaption to read as "Select today's weather". I wasn't able to inset the apostrophe in the middle - need help.

Answer 1

Escape the apostrophe with backslash \\

optionsCaption: 'Select today\\'s weather'">

 var vm = { WeatherId: ko.observable(), WeatherConditions: [{ Id: '1', Name: 'Sunny' }, { Id: '2', Name: 'Rainy' }, { Id: '3', Name: 'Cloudy' }, { Id: '4', Name: 'Snowy' }] }; ko.applyBindings(vm); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script> <select data-bind="options: WeatherConditions, value: WeatherId, optionsText:'Name', optionsCaption: 'Select today\\'s weather'"> </select> 

Answer 2

You just need to escape the ' : today\\'s :

 var vm = { WeatherId: ko.observable(), WeatherConditions: [{ Id: '1', Name: 'Sunny' }, { Id: '2', Name: 'Rainy' }, { Id: '3', Name: 'Cloudy' }, { Id: '4', Name: 'Snowy' }] }; ko.applyBindings(vm); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script> <select data-bind="options: WeatherConditions, value: WeatherId, optionsText:'Name', optionsCaption: 'Select today\\'s weather'"> </select> 

This isn't a KnockoutJS thing, it's a basic JavaScript thing. To put a ' in a ' -quoted string, you use an escape: today\\'s .

Remember, the content of the data-bind attribute is an JavaScript object initializer without the { and } , whose contents are evaluated within a series of with blocks to provide context. (Literally. Knockout builds the text of a function to do that, using as many with blocks as it needs for the nesting level, and with a return {" + theDataBindAttributeText}; at the end, then uses new Function to build a function from that, and calls it to get the bindings.)