Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><strike>You can most likely extend your observable, depending on what exactly you are trying to achieve. This should give you a good direction (I haven't dropped it into a fiddle to test it yet) - </p> <pre><code>ko.extenders.overage = function(target, max) { target.overage = ko.observable(); var result = ko.computed({ read: target, write: function(newValue) { var current = target(), valueToWrite = newValue &gt; max ? max : newValue if (valueToWrite === max) { target.overage(current - max); target(valueToWrite); } else { target.notifySubscribers(valueToWrite); } } }); result(target()); return result; }; function AppViewModel(one) { this.myNumberOne = ko.observable(one).extend({ overage: 500 }); } ko.applyBindings(new AppViewModel(221.2234)); </code></pre> <p>Now your observable <code>myNumberOne</code> has an extended property called <code>overage</code> for any additional amount over the <code>max</code> that is set when you extend it (in this case, 500) and the vlaue of myNumberOne or any other observable that you extend will cap out at 500 and pass the additional as overage.</p> <p>In your view you could use this something like this - </p> <pre><code>&lt;span data-bind="text: myNumberOne"&gt;&lt;/span&gt; &lt;!-- ko if: myNumberOne().overage --&gt; Overage amount - &lt;span data-bind="text: myNumberOne().overage"&gt;&lt;/span&gt; &lt;!-- /ko --&gt; </code></pre> <p>or </p> <pre><code>&lt;span data-bind="text: myNumberOne"&gt;&lt;/span&gt; &lt;div data-bind="text: $data.myNumberOne().overage"&gt;&lt;/div&gt; </code></pre> <p></strike></p> <p><a href="http://jsfiddle.net/DNxHu/" rel="nofollow">http://jsfiddle.net/DNxHu/</a></p> <p>Extend it and subscribe to it, don't use a computed, etc... Check the fiddle</p>
    singulars
    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.
 

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