Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Probably some different approaches that you could take here. Here is one thought (feel free to use a better name than <code>optionsPlus</code>):</p> <pre><code>ko.bindingHandlers.optionsPlus = { preprocess: function(value, name, addBindingCallback) { //add optionsCaption to the bindings against a "caption" sub-observable addBindingCallback("optionsCaption", value + ".caption"); //just return the original value to allow this binding to remain as-is return value; }, init: function(element, valueAccessor) { var options = valueAccessor(); //create an observable to track the caption if (options &amp;&amp; !ko.isObservable(options.caption)) { options.caption = ko.observable(); } //call the real options binding, return to control descendant bindings return ko.bindingHandlers.options.init.apply(this, arguments); }, update: function(element, valueAccessor, allBindings) { var options = valueAccessor(), value = ko.unwrap(options); //set the caption observable based on the length of data options.caption(value.length === 1 ? null : allBindings.get("defaultCaption")); //call the original options update ko.bindingHandlers.options.update.apply(this, arguments); } }; </code></pre> <p>You would use it like:</p> <pre><code>&lt;select data-bind="optionsPlus: choices, defaultCaption: 'choose one...'"&gt;&lt;/select&gt; </code></pre> <p>It creates a <code>caption</code> observable off of your observableArray/array and updates the caption initially and whenever the options are updated (if using an observableArray).</p> <p>Sample here: <a href="http://jsfiddle.net/rniemeyer/jZ2FC/">http://jsfiddle.net/rniemeyer/jZ2FC/</a></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload