[Kendo] Value bind 方式 ObservableObject

其實查詢 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 也可以直接透過變數宣告,非常好用