Knockout.js computed function override

510 views
Skip to first unread message

karthik.r...@gmail.com

unread,
Mar 13, 2013, 7:56:25 PM3/13/13
to knock...@googlegroups.com
I am using Knockout.js to develop a calculator. I am facing a situation that I don't know how to handle.

In the below example, everything works fine when the user enters a product and value and the values are saved in the DB. But when the user comes to edit this page, my requirement is to show all the values the user entered along with the total. But when the user changes something in the product or quantity, the total should change as expected.

We now store the total in DB and total could be changed by some admin users.In this case,is there a way we can override the computed value when the user goes to the edit page but when the user changes product or quantity,then the compute should happen with the latest values from product and quantity.

Help is appreciated.


    var TsFoundationDeviceModel = function(product,qty) {
    var self = this;
    self.product = ko.observable();
    self.quantity= ko.observable();
    self.computedExample = ko.computed(function() {
       return self.product() * self.quantity() ;
    });}

My HTML code looks like 

    <input name="product" data-bind="value:product">
    <input name="value" data-bind="value:value">
    <input name="total" data-bind="value:computedExample"/>

Michael Latta

unread,
Mar 13, 2013, 8:07:37 PM3/13/13
to knock...@googlegroups.com
It is a really really really bad idea to allow manual entry of totals.  If you need to allow admins to adjust an order then store an adjustment amount in the database and compute the total.  If your business rules would clear the adjustment when the user modifies the order then you can clear the adjustment and still compute the total at all times.

Michael


--
You received this message because you are subscribed to the Google Groups "KnockoutJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to knockoutjs+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

karthik.r...@gmail.com

unread,
Mar 13, 2013, 9:58:54 PM3/13/13
to knock...@googlegroups.com
Could there be a way to override the total the time page loads..

Michael Latta

unread,
Mar 14, 2013, 10:42:20 AM3/14/13
to knock...@googlegroups.com
If you use a computed observable to display the total you can choose to display the value from the server or a computed value as you choose.  Then when the user make a change you can clear the server value and compute a new total.

Michael

karthik.r...@gmail.com

unread,
Mar 14, 2013, 12:56:01 PM3/14/13
to knock...@googlegroups.com
Michael,
Can you help me with this example ? In this example,how can I pass a value to computed function to override it.

Michael Latta

unread,
Mar 14, 2013, 1:11:48 PM3/14/13
to knock...@googlegroups.com
Here is the fiddle at the end of the thread modified to allow a manual override.

Michael

karthik.r...@gmail.com

unread,
Mar 14, 2013, 1:24:16 PM3/14/13
to knock...@googlegroups.com
Michael..
Thanks for your help.I tried the jsfiddle but apparently when the enter the value for product and value,the total is not changing.
Can I use read ,wrtie functions in computed observable to handle this ? 

Michael Latta

unread,
Mar 14, 2013, 1:40:01 PM3/14/13
to knock...@googlegroups.com
I just verified the fiddle works.  The first 2 fields take the inputs as before and the third is the computed total.  Changes do not propigate until you leave the fields so you may need to click in another field to make ti compute.

The fourth field is the override.  A value entered there will override the computed total.  You could use some form of read/write so you would "set" the total to null to get it to compute it.

Michael

Karthik Renkarajan

unread,
Mar 14, 2013, 7:46:31 PM3/14/13
to knock...@googlegroups.com
Michael,
I first added the override value that gets reflected in the computed total input.Now I am adding product and value and tabbing out..The value of the total is not changing.

Michael Latta

unread,
Mar 14, 2013, 10:29:34 PM3/14/13
to knock...@googlegroups.com
Please look at the code.  In this example you would need to clear the override manually.  If you want it to automatically clear the override you would do that in the write action for your product and price observables.

Michael
Reply all
Reply to author
Forward
0 new messages