Sapui5 如何将整型输入值绑定到滑块

我想有一个滑块和一个输入控件，都是一个特定的值

用户应该能够使用输入字段或滑块输入其值

如果用户更改滑块上的值，则输入字段应显示滑块的值。如果用户在输入字段中输入了一些内容，则滑块应移动到相应的值。
目前，我正在创建一个

JSONModel

，其值作为要绑定的属性：

let model=new JSONModel({
值名称：10
});
setModel（model）；

现在，当我更改滑块上的值时，输入字段的更新工作正常。但是如果我在输入字段中输入一个值，滑块不会移动到该值

为什么会这样？我该如何解决我的问题

---

---

由于给定的解决方案仅适用于整数值，因此创建了一个关于浮点值的后续问题。起初，我对此感到困惑。原因似乎是该值保存为字符串（尽管您明确指定了数字或将初始模型中的值明确绑定为数值）。 我通过在输入端处理liveChange事件，检索valueName的模型值，对该值进行parseInt，然后将滑块设置为该值来检查这一点。 这会导致滑块在我更改输入时更新

控制器：

handleChange: function(){
    var slider = this.getView().byId("slider");
    var val = this.getView().getModel().getProperty("/valueName");
    slider.setValue(parseInt(val));
}

XML视图：

<Slider id="slider" value="{/valueName}" min="0" max="100" step="10" width="200px" />
<Input textAlign="Center" value="{/valueName}" type="Number" width="50px" valueLiveUpdate="true" liveChange="handleChange"/>

需要注意的是，如果我想将滑块更新到70，我需要首先输入0（因为滑块设置会在我键入数字时将值转换为min（0）或10-鉴于liveUpdate的正确行为）。有很多方法可以解决这个问题，但我想我会给你答案，你可以从中找到解决办法

---

最终我认为这是一个bug编辑-这不是一个bug-请参考Boghyon在这个答案下面的评论

我起初对此感到困惑。原因似乎是该值保存为字符串（尽管您明确指定了数字或将初始模型中的值明确绑定为数值）。 我通过在输入端处理liveChange事件，检索valueName的模型值，对该值进行parseInt，然后将滑块设置为该值来检查这一点。 这会导致滑块在我更改输入时更新

控制器：

handleChange: function(){
    var slider = this.getView().byId("slider");
    var val = this.getView().getModel().getProperty("/valueName");
    slider.setValue(parseInt(val));
}

XML视图：

<Slider id="slider" value="{/valueName}" min="0" max="100" step="10" width="200px" />
<Input textAlign="Center" value="{/valueName}" type="Number" width="50px" valueLiveUpdate="true" liveChange="handleChange"/>

需要注意的是，如果我想将滑块更新到70，我需要首先输入0（因为滑块设置会在我键入数字时将值转换为min（0）或10-鉴于liveUpdate的正确行为）。有很多方法可以解决这个问题，但我想我会给你答案，你可以从中找到解决办法

最终我认为这是一个bug编辑-这不是一个错误-请参考本答案下方Boghyon的评论

用户应该能够使用输入字段或滑块输入其值

如果您不知道，可以使用内置的工具提示输入功能：

给你这个：

用户应该能够使用输入字段或滑块输入其值

如果您不知道，可以使用内置的工具提示输入功能：

给你这个：

---

滑块等待类型float的值

但是，输入字段将输入计算为字符串

您可以通过将适当的

类型

分配给绑定信息对象，以声明方式解决此问题：

• 将

  sap/ui/model/type/String

  *分配给滑块的

  值

  绑定类型⇒ 在将值传递给滑块之前，将模型中的字符串值格式化为浮点类型。
  由于与字符串类型的双向绑定，在将其存储到模型中之前，从滑块操纵的浮点值将转换回字符串值
• 或将

  sap/ui/model/type/Float

  *分配给输入的

  值

  绑定类型⇒ 将值存储为模型中的数字。然后，滑块可以直接使用数值

下面是上述方法的演示：

在绑定中使用

类型

功能将允许在更新控件之前解析、格式化甚至验证模型值，同时仍保持双向数据绑定模式

---

---

*如果绑定到ODataModel，则需要

sap/ui/model/odata/type/Decimal|字符串

滑块等待类型float的值

但是，输入字段将输入计算为字符串

您可以通过将适当的

类型

分配给绑定信息对象，以声明方式解决此问题：

• 将

  sap/ui/model/type/String

  *分配给滑块的

  值

  绑定类型⇒ 在将值传递给滑块之前，将模型中的字符串值格式化为浮点类型。
  由于与字符串类型的双向绑定，在将其存储到模型中之前，从滑块操纵的浮点值将转换回字符串值
• 或将

  sap/ui/model/type/Float

  *分配给输入的

  值

  绑定类型⇒ 将值存储为模型中的数字。然后，滑块可以直接使用数值

下面是上述方法的演示：

在绑定中使用

类型

功能将允许在更新控件之前解析、格式化甚至验证模型值，同时仍保持双向数据绑定模式

---

*如果与ODataModel绑定，则需要

sap/ui/model/odata/type/