Kendo MVVM binding 2 source in same remote template - mvvm

Question

I am using Kendo MVVM. This ApisTemplate is called Remotely and It opens up. Problem is in "PaxPreferenceTemplate" template. There are 2 source binding. Only 1st works i.e Segment . i dont know why . Even if you use
<label data-bind:"text: Segment.SegmentDetailsToDisplayPricing" ></label>
still result would be same. if i comment
<div data-bind="source: Segment"></div>
then 2nd line works
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>

Answer 1

I think you must to divide your template because you have two different type a list and a single item.
<script id="ApisTemplate" type="text/x-kendo-template" class="KendoExtTemplate">
<div>
<div data-bind="source: ApisVMList.PaxPreferenceBySegment" data-template="PaxPreferenceTemplate"></div>
<div data-bind="source: ApisVMList.PaxPreferenceBySegment" data-template="PaxPreferenceTemplate_Second"></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>
</script>
<script id="PaxPreferenceTemplate_Second" type="text/x-kendo-template" class="KendoExtTemplate">
<div data-bind="source: PaxInfo" data-template="PaxInfoTemplate"></div>
</script>