Knockout binding nested viewmodels

Question

So I have a single page application with a Web API backend, so I retrieve data from multiple endpoints and therefor have multiple nested viewmodels. The application has a very modular design so it's a bit hard to get the code in here but I'll do my best.

What Im trying to do is using the data-bind if statement to include the HTML segment only if Condition1 or Condition2 is true, the part Im having a trouble with is that Condition1 and Condition2 are in the general viewmodel while the values that I want to bind with are in the deal viewmodel, as seen with the "with:deal" statement. Anyone have any idea how I could achieve this?

Viewmodel

     var self = this;
     self.deal = ko.observable();
     self.general = ko.observable();

    calculation.getBasicFactsDeal(calculationId, function (data) {
        self.deal(mapping.fromJS(data));
        var data = self.deal();
    });

    calculation.getBasicFactsGeneral(calculationId, function (data) {
        self.general(mapping.fromJS(data));
        var data = self.general();
    });

HTML:

    <div class="section" data-bind="with: deal">
        <div data-bind="if: $root.general().Condition1 || $root.general().Condition2 >
            <label >Is this a New Client?</label>


            <input type="radio" name="RadioGroup" id="Radio1" value="true" data-bind="    checkedRadioToBool: NewClient" />
            <label for="radio1">Yes</label>
            <input type="radio" name="KSTProcurmentRadio" id="Radio2" value="false" data-bind="    checkedRadioToBool: NewClient" />
            <label for="radio2">No</label>
            </div>
    </div>

Tomas Kirda Tomas Kirda · Accepted Answer · 2013-06-04T18:06:38

Are you having issues with scope. How about:

<div class="section">
    <div data-bind="if: $root.general().Condition1 || $root.general().Condition2">
        <!-- ko with: deal -->
            <label>Is this a New Client?</label>
            <input type=" radio " name="RadioGroup " id="Radio1 " value="true " data-bind="checkedRadioToBool: NewClient" />
            <label for="radio1 ">Yes</label>
            <input type="radio " name="KSTProcurmentRadio " id="Radio2 " value="false " data-bind="checkedRadioToBool: NewClient " />
            <label for="radio2 ">No</label>
        <!-- /ko -->
    </div>
</div>

Knockout binding nested viewmodels

2 Answers