Kendo ui：無法將文本值和按鈕單擊事件綁定到用於動態創建的HTML內容的視圖模型

Question

我正在使用Kendo MVVM並使用data attribute將文本字段值和按鈕單擊事件綁定到viewModel。

我可以成功綁定文本框的默認值，並單擊最初在頁面上呈現的按鈕的單擊事件。

但是，當我動態生成文本框和按鈕時，我無法將值和單擊事件綁定到viewModel。

這是我的工作DEMO。下面是我的代碼：

JS：

var viewModel = kendo.observable({ 
    textValue: 1, 
    buttonClick: function(e) { 
     alert("button click"); 
    }, 
    generateDynamicContent: function() { 
    var html = '<input data-bind="value: dynamicTextValue" name="dynamicTextValue"/><input type="button" value="Dynamic Button" data-bind="click: dynamicButtonClick"/>'; 

     $('#dynamicContent').append(html); 

    }, 
    dynamicTextValue: 2, 
    dynamicButtonClick: function(e) { 
     alert("dynamic button click"); 
    }, 
}); 
kendo.bind($("#example"), viewModel); 

HTML：

<div id="example"> 
<input data-bind="value: textValue" name="textValue"/> 
<input type="button" value="Button" data-bind="click: buttonClick"/> 

<br /> 
<input type="button" value="Generate Dynamic Content" data-bind="click: generateDynamicContent"/> 

<br/> 
<div id="dynamicContent"> 
</div> 

</div> 

Answer 1

試試這個代碼

追加HTML

之後添加

var viewModel = kendo.observable({ 
    textValue: 1, 
    buttonClick: function(e) { 
     alert("button click"); 
    }, 
    generateDynamicContent: function(e) { 
    var html = '<input data-bind="value: dynamicTextValue" name="dynamicTextValue"/><input type="button" value="Dynamic Buttondddd" data-bind="click: dynamicButtonClick"/>'; 

    $('#example').append(html); 
    //--------THIS LINE IS IMPORTANT 
    kendo.bind($("#example"), viewModel); 
    }, 
    dynamicTextValue: 2, 
    dynamicButtonClick: function(e) { 
     alert("dynamic button click"); 
    }, 
}); 

kendo.bind($("#example"), viewModel); 

DEMO