[解決済み】Kendo Observable Bindingと併用する場合、Kendo Switch Labelsを変更することは可能ですか？[Kendo-UI]です。

質問

<input id="switch" data-role="switch" data-bind="enabled: isEnabled, visible: isVisible, checked: isChecked, events: { change: onChange }" />

Switch value: <span id="span"></span>



<script>
  var obs = kendo.observable({
    isChecked: true,
    isEnabled: true,
    isVisible: true,
    onChange: function (e) {
      var value = e.checked ? "ON" : "OFF";
      document.getElementById("span").innerHTML = value;
    }
  });

  kendo.bind($("#switch"), obs);
</script>

ここでは、trueまたはfalseの値を剣道スイッチにバインドして表示しています。

デフォルトではスイッチラベルは "On"または "Off"ですが、それぞれ "Y" または "N" に変更したいのです。

https://dojo.telerik.com/uDiGifEm 参考になるように、ここに動作例を追加しました。

cssで上書きする方法と、"CSS "を使って上書きする方法を試してみました。 剣道モバイルスイッチ を使用してスイッチを実装していますが、observableバインディングを使用する要件があります。ここではenabledをtrueにハードコードしていますが、実際のシナリオではjsonオブジェクトのboolean値とバインドされているので、値が変更された場合はon changeメソッドが使用されて更新されます。

どのように解決するのですか？

switch宣言に追加してください。

data-messages="{ checked: 'Y', unchecked: 'N' }"

APIリファレンスです。 https://docs.telerik.com/kendo-ui/api/javascript/ui/switch/configuration/messages

剣道APIドキュメントの例のほとんどは、jqueryプラグイン構文ですが、すべてmvvm宣言構文でも動きます。html の中で、オプションの前に "data-" を付けるだけです。