オブジェクト内のデータをバインドする方法[テーブル]他のオブジェクトの内部[TimePicker]

Question

私は問題がある、2つのオブジェクトに1つのモデルを使用する必要があります。しかし、私はそれを行う方法を知らない。 合成では、私は "テーブル"オブジェクトとリンクするモデル（modelJSON）を持っていますが、同時にテーブルが表示される（行ごとに）必要があります。 タイムピッカー同じように...

現在のところ、タイムピッカーのデータはリストされていないので、テーブルの場合は表示されません。 ...

-------------- 
Turno | Time | 
------|------| 
T1 |  | 
     |  | 
T2 |  | 
     |  | 
T3 |  | 

これは私が必要なものである

---------------------- 
Turno |  Time  | 
------|---------------| 
T1 | 01:00 14:00 | 
     |    | 
T2 | 01:00 08:00 | 
     |    | 
T3 | 07:59 23:00 | 

マイコード：

これが結果です

var modelJSON = 
      [ 
       {ID_TURNO : "T1", H1 : '01:00', H2 : '14:00' }, 
       {ID_TURNO : "T2", H1 : '05:59', H2 : '08:00' }, 
       {ID_TURNO : "T3", H1 : '07:59', H2 : '23:00' } 
      ]; 

    var oSection = 
     new sap.uxap.ObjectPageSection({ 
       title: "Week " + targetWeek, 
       subSections: new sap.uxap.ObjectPageSubSection({ 
          blocks: 
           new sap.ui.table.Table({ 
            width: "98%", 
            selectionMode: sap.ui.table.SelectionMode.Single, 
            visibleRowCountMode: sap.ui.table.VisibleRowCountMode.Fixed, 
            visibleRowCount: 2, 
            rowSelectionChange: function(oEvent) { 

             var path = oEvent.getParameter("rowContext").getPath(); 
             var oData = this.getModel().getProperty(path); 

            }, 
            columns: [ 
             new sap.ui.table.Column({ 
              label: new sap.ui.commons.Label({ text: "Turno" }), 
              template: new sap.ui.commons.TextView({ text: "{ID_TURNO}" }), 
              width: '33px' 
             }), 
             new sap.ui.table.Column({ 
              label: new sap.ui.commons.Label({ 
               textAlign : "Center", 
               text: "Time" 
              }), 
              template: new sap.ui.layout.form.Form({ 
               layout: new sap.ui.layout.form.ResponsiveGridLayout({ 
               breakpointL : 140 
               }), 
               formContainers: [ 
                new sap.ui.layout.form.FormContainer({ 
                 formElements: [ 
                  new sap.ui.layout.form.FormElement({ 
                   fields: [new sap.m.TimePicker({ 
                     valueFormat : "HH:mm", 
                     displayFormat : "HH:mm", 
                     placeholder : " ", 
                     width : "62px", 
                     value : "{H1}" 
                    }).addStyleClass("sapUiSizeCompact") 
                    ] 
                  }) 
                 ] 
                }), 
                new sap.ui.layout.form.FormContainer({ 
                 formElements: [ 
                  new sap.ui.layout.form.FormElement({ 
                   fields: [new sap.m.TimePicker({ 
                     valueFormat : "HH:mm", 
                     displayFormat : "HH:mm", 
                     placeholder : " ", 
                     width : "62px", 
                     value : "{H2}" 
                    }).addStyleClass("sapUiSizeCompact") 
                   ] 
                  }) 
                 ] 
                }) 
               ]  
              }), 
              width: '95px', 
              hAlign : "Center" 
            }) 
            ] 
           }).setModel(new sap.ui.model.json.JSONModel(modelJSON)) 
           .bindRows({ path: "/" }) 
           .setVisibleRowCount(modelJSON.length) 
          }) 
        }); 

ありがとう！ :)

Answer 1

代わりのフォームを使用して、あなたはVBoxコントロールの例を使用することができます。あるとして

template: new sap.m.VBox({ 
    content: [new sap.m.TimePicker({                   
       valueFormat : "HH:mm",                   
       displayFormat : "HH:mm",                   
       placeholder : " ",                   
       width : "62px ",                   
       value : "{H1}"                  
      }).addStyleClass("sapUiSizeCompact"), 
     new sap.m.TimePicker({ 
      valueFormat : "HH:mm", 
      displayFormat : "HH:mm", 
      placeholder : " ", 
      width : "62px", 
      value : "{H2}"             
     }).addStyleClass("sapUiSizeCompact") 
] 
}); 


                  ]