其實查詢 Kendo Value Bind 就有許多相關資訊
https://docs.telerik.com/kendo-ui/framework/mvvm/bindings/value
第一個舉的範例就已經充分表現Kendo 的 ObservableObject bind 的方式
但這邊我要多舉例一個方法
有些時候 我們會需要一些共用變數來裝著值
然後再最後的時候一次bind 到View裡面
在我們團隊裡面會這樣做
class SendReviewViewModel {
private observationData: kendo.data.ObservableObject;
constructor() {
this.observationData = kendo.observable({});
}
}
會在TypeScript ViewModel 內 建構的時候就先實體出 observable 的物件
private BindSendReviewView = function (data: object) {
const self: SendReviewViewModel = this;
self.observationData.set("SighComment", data);
kendo.bind($("#htmlId"), self.observationData);
}
然後再把值用 set 的方法 存進去(這邊機制 有點像 Dictionarty<key,value> 的方法)
還可以再用
self.ObservableData.get("SignComment")
把值取出來
最後再把建構 因為都已經把值傳進去Key 裡面了
只要用bind 的方法 就可以將指定的DOM 套入 我們剛剛輸入的Value
然後在前端 data-bind 再指定 我們的Key name 就可以直接顯示Value
<textarea data-bind="value: SighComment" rows="10"></textarea>
這樣的方式 比起Jquery 各別 指定都還要方便許多
----------------------------------------------
2020/01/08 補充
kendo.bind($("#htmlId"), self.observationData) 其實不一定要有
如果沒有bind 在前端有data-bind 的指定的話,其實也串的到值
但最主要是 如果有kendo.bind 綁住的話
前端值 有更動的話 self.observationData 的值也會跟著變動
所以沒有kendo.bind 綁住dom 的話 ,就是一開始畫面是有值或是 在程式中 用observableData.get("SighComment")
都還是會有值,但就都是一開始Set 的值,並不會因為前端的變更,而直接有改變
------------------------------------
2020/01/14 補充
<script>
var observable = new kendo.data.ObservableObject({ name: "John Doe" });
observable.bind("change", function(e) {
console.log(e.field); // will output the field name when the event is raised
});
observable.set("name", "Jane Doe"); // 觸發change事件 印出console raises the "change" event and the handler outputs "name"
</script>
有時候如果需要有Key 值變更後的event 也可以直接透過變數宣告,非常好用