如何在HTML视图中进行数据绑定？

Question

我正在创建这样的HTMLView，

<template data-controller-name="sap.tnt.sample.SideNavigation.V">
<form id="eraseForm" method="post"
    action="SAPEVENT:SAVE">
    <input name="operation" data-value="{/operation}" />
</form>
</template>

创建后我正在设置模型，但数据没有正确绑定，所以我尝试了这样，

<template data-controller-name="sap.tnt.sample.SideNavigation.V">
<form id="eraseForm" method="post"
    action="SAPEVENT:SAVE">
    <div data-sap-ui-type="sap.ui.commons.TextField" data-name="operation" data-value="{/operation}"></div>
    <div data-sap-ui-type="sap.ui.commons.TextField" data-name="layerId" data-value="{/layerId}"></div>
    <div data-sap-ui-type="sap.ui.commons.TextField" data-name="featureId" data-value="{/featureId}"></div>
    <div data-sap-ui-type="sap.ui.commons.TextField" data-name="geomType" data-value="{/geomType}"></div>
    <div data-sap-ui-type="sap.ui.commons.Button" data-name="geomType" data-press="onButtonPress"></div>
</form>
</template>

所以，如果我喜欢这样，那么所有元素都会在表单之外创建。那么如何为这种类型的视图进行数据绑定，以便提交表单？