Kendo MVVM - 전체적으로 결합 모델보기

Question

양식을 채우는 동안 뷰 모델의 동작을 관찰하고 싶습니다. 모델과 비슷한 모양의 많은 필드를 정의하고 바인딩하는 작업을 수행 할 수 있습니다.하지만 이는 다소 지저분합니다.

현재 다음 코드로이 작업을 수행하고 있습니다.

(function ($) { 
    $.printJSON = function(value){ 
     return JSON.stringify(value, undefined, 2); 
    } 
})(jQuery); 

var viewModel = kendo.observable({ 
        // other fields etc 
    update: function (e) { 
     e.preventDefault(); 
     $("#json_result").html($.printJSON(this)); 
    } 
}); 


<div style="width: 400px; float: left; padding-left: 15px;" > 
    <button data-bind="click: update" value="Update" >Update</button> 
    <pre id="json_result"> 
    </pre> 
</div> 

버튼을 클릭하면 뷰 모델 JSON을 화면에 그려서 멋지고 형식화 된 기능을 실행합니다.

하지만 여전히 버튼을 클릭해야합니다. 그것이 나에게 큰 문제는 아니지만, 많은 상황에 필요한 것이 아니기 때문에, 실제로 이것을 수행하고 뷰 모델이 어떤 식 으로든 변경 될 때 업데이트 할 수있는 방법이 있습니까? 그냥 함수에 바인딩하려고했는데 명시 적 호출없이 업데이트되지 않습니다. 뷰 모델에 바인딩을 시도 했는데도 작동하지 않았습니다.

Answer 1

당신도 단순히 change 이벤트 바인딩 수 :

viewModel.bind("change", function (e) { 
    $("#json_result").html($.printJSON(this)); 
}); 

을하거나 계산 된 필드 사용할 수 있습니다로에

var viewModel = kendo.observable({ 
    field1: "field1", 
    field2: "field2", 
    field3: "field3", 
    print: function() { 
     // need to register for all fields so that the change event for print is triggered 
     for (var fieldName in this) { 
      if (this.hasOwnProperty(fieldName)) { 
       this.get(fieldName); 
      } 
     } 

     return $.printJSON(this.toJSON()); 
    } 
}); 

및 바인딩 :

<pre data-bind="html: print"> 

이 바이올린을 참조하십시오 두 가지 방법을 모두 보여줍니다. http://jsfiddle.net/lhoeppner/S2WeB/