Kendo MVVM binding 2 source in same remote template

[Neeraj]

 I am using Kendo MVVM. This ApisTemplate is called Remotely and It opens up. Problem is in "PaxPreferenceTemplate" template. There 2 source binding. Only 1st works i.e know Even if you use <label data-bind:"text: Segment.SegmentDetailsToDisplayPricing" ></label>  still result would be same.
    Please tell what would be correct way 

Note: ALL below code is in 1 file.

 

 

<script id="ApisTemplate" type="text/x-kendo-template" class="KendoExtTemplate">

    <div>
        <div data-bind="source: ApisVMList.PaxPreferenceBySegment" data-template="PaxPreferenceTemplate"></div>

        <div style="text-align:center;">
            <button type="button" id="btnIssueTicket" onclick="SaveIssueTicket(this)" class="k-button k-primary Apis_submit " style="width: 100px; height: 25px; margin-right: 5px;">
                <i class="fa fa-floppy-o fa-inverse" aria-hidden="true"></i> Save
            </button>

            <button type="button" class="k-button " onclick="CloseApisWindow(this)" style="width: 100px; height: 25px;"><i class="fa fa-ban"></i> Cancel</button>
        </div>
    </div>
</script>


<script id="PaxPreferenceTemplate" type="text/x-kendo-template" class="KendoExtTemplate">

    <div data-bind="source: Segment" data-template="SegmentTemplate"></div>

    <div data-bind="source: PaxInfo" data-template="PaxInfoTemplate"></div>

</script>

<script id="SegmentTemplate" type="text/x-kendo-template" class="KendoExtTemplate">
    <label data-bind="text: SegmentDetailsToDisplayPricing"></label>
</script>

<script id="PaxInfoTemplate" type="text/x-kendo-template" class="KendoExtTemplate">
    <div>
        <label data-bind="text: Pax.PersonName"></label>
        <input data-role="dropdownlist"
               data-text-field="PassportNumber"
               data-value-field="PassportNumberID"
               data-bind="source: PossiblePassports" />

        <input data-role="dropdownlist"
               data-text-field="FrequentFlyernumber"
               data-value-field="FrequentFlyernumberID"
               data-bind="source: PossibleFrequentFlyers" />
    </div>



</script>

 

[Dimitar]

Hello Neeraj,

I am attaching an MVC solution, where a similar scenario to the one described is demonstrated (Kendo UI MVVM with nested templates).

Can you verify that the bindings in the example work as expected on your end? Also, there is a known limitation that forces you to use a single root element in the template. Having two first-level DOM elements is going to result in an unexpected behavior. You can find more information in the following documentation article.

Regards,
Dimitar
Progress Telerik