Do nested Viewmodel If Binding with KnockoutJS

Question

I want to calculate within an if binding from a nested view model. I know how to do a standard if binding based on my view model:

<input type="text" data-bind="value: SelectedVendor() ? SelectedVendor().VendorPrice : '0'" /></td>

Now I want to do the Following:

If QTYonOrder > SelectedVendor().VendorMOQ then I want to display the QTYonOrder
If QTYonOrder < SelectedVendor().VendorMOQ then I want to display the VendorMOQ

Is it possible to do these calculation within the data-bind IF?

My JSON Reply:

   {
    "ProductName": "Product123",
    "RequiredComponents": "CAP 10% H/Vol",
    "StockCode": "142111411",
    "RequiredQtyByBom": 4,
    "QtyUnassignedInWarehouse": 0,
    "QtyAllocatedInWarehouse": 40,
    "PCBReference": "442C",
    "QtyOnOrder": 26,
    "Vendors": [],
    "RequireVendor": false
},
{
    "ProductName": "Product123",
    "RequiredComponents": "Screws",
    "StockCode": "Screws",
    "RequiredQtyByBom": 1,
    "QtyUnassignedInWarehouse": 0,
    "QtyAllocatedInWarehouse": 14,
    "PCBReference": "Screws",
    "QtyOnOrder": 26,
    "Vendors": [
                  {"VendorID": "3", 
                  "VendorName": "ABC Supplier",
                  "VendorMOQ": 50000,
                  "VendorItemPrice": 322},
                  {"VendorID": "4", 
                  "VendorName": "DEF Supplier",
                  "VendorMOQ": 4,
                  "VendorItemPrice": 120}
               ],
    "RequireVendor": true
},
{
    "ProductName": "Product123",
    "RequiredComponents": "14141415",
    "StockCode": "151555231",
    "RequiredQtyByBom": 1,
    "QtyUnassignedInWarehouse": 0,
    "QtyAllocatedInWarehouse": 170,
    "PCBReference": "1414",
    "QtyOnOrder": 26,
    "Vendors": [],
    "RequireVendor": false
}

My HTML:

<table class="table table-bordered">
                <thead>
                    <tr>
                        <td>Stock Code</td>
                        <td>Qty Required</td>
                        <td>Vendor</td>
                        <td>Vendor Price p/Unit</td>
                        <td>MOQ</td>
                        <td>Qty To Order</td>
                        <td>Value</td>
                    </tr>
                </thead>
                <tbody data-bind="foreach: CheckStock">
                    <tr data-bind="if: RequireVendor">
                        <td data-bind="text: StockCode"></td>
                        <td data-bind="text: (RequiredQtyByBom * QtyOnOrder)">                         
                        </td>
                        <td>
                            <select data-bind="options: Vendors, optionsText: 'VendorName', optionsCaption: 'Choose a Vendor...', value: SelectedVendor" class="form-control"></select>
                        </td>
                        <td>
                            <input type="text" data-bind="value: SelectedVendor() ? SelectedVendor().VendorPrice : '0'" /></td>
                        <td data-bind="text: SelectedVendor() ? SelectedVendor().VendorMOQ : '0'"></td>
                        <td>TODO CALC</td>
                        <td>TODO CALC</td>
                    </tr>                       
                </tbody>
            </table>

Does it have to be calculated in the view? Seems more appropriate to create a computed observable in your viewModel for this. — lagerone
– lagerone, Commented Aug 30, 2013 at 12:28
That should work. Please post your viewModel to make sure everything is right there. — Bradley Trager
– Bradley Trager, Commented Aug 30, 2013 at 14:22

Community · Accepted Answer · 2017-05-23 12:29:23Z

I'm guessing that you're a colleague of the person that asked this other question. I'm re-using the fiddle I posted there in my answer, which utilizes the mapping plugin. As noted by @BradleyTrager in a comment, you haven't shown your ViewModel, so that's why I chose to reuse mentioned fiddle.

The logic you want to use in an if binding seems fine to me. However, because you'll need to accomodate for nothing being selected, the actual code would quickly contain too much logic to be healthy in a view (in pseudo code):

<!-- ko: if typeof SelectedVendor() != 'undefined' && 
            QtyOnOrder() < SelectedVendor().VendorMOQ() -->

Therefore I'd recommend adding it to your view model as a computed:

self.ShowMOQ = ko.computed(function() {
    if (typeof self.SelectedVendor() === 'undefined') { return true; }
    return self.QtyOnOrder() < self.SelectedVendor().VendorMOQ();
});

Then the View becomes quite clean:

<!-- ko if: ShowMOQ -->

Or:

<!-- ko if: !ShowMOQ() -->

See this fiddle for a working demo.

Note that I don't (and can't) know if I've placed the bits in the correct spot in the fiddle, because your question contains a lot of code that isn't related to your question yet impossible to understand without context. Related to that I'd suggest making your examples in questions smaller (as small as possible), which makes it easier for others to answer and help.

Collectives™ on Stack Overflow

Do nested Viewmodel If Binding with KnockoutJS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related