敲除渲染模板与新数据模型有关的“更改事件”下拉菜单

Question

我正在使用基因敲除本机模板在页面上渲染带有一些示例数据的模板。

以下代码将示例数据加载在页面上的模板

上

my.vm = {
   load: function () {
        $.each(my.sampleData.data.sections, function (i, p) {
             // Sample Data Loading Happens HERE
             // I wish to load different sample data on on-click 
             // event of  #sampledata dropdown menu. The template 
             // should re render without a page refresh. 
             // Sample data is stored in db, have to get that using
             // AJAX request
         });
     }
 }; // End of My.VM
 my.vm.load();
 ko.applyBindings(my.vm);

以下是下拉菜单，单击时，数据更新应发生

<select id="sampledata">
  <option value="637">Sample Data 1</option>
  <option value="697">Sample Data 2</option>
  <option value="646">Sample Data 3</option>
</select>

以下代码的响应具有新数据，但是当我使用该数据应用绑定时，绑定失败

  $('#sampledata').on('change', function (){
       var cvid = $(this).val();
              jQuery.post(
                MyAjax.ajaxurl,
                {
                    action : 'getpost',
                    cvid : cvid
                },
                function( response ) {
                //Response now have new data
                 my.vm.load();
                           //But the apply bindings is not working for new data
                 ko.applyBindings(response); 
                  }
              );
       });

Answer 1

取决于您从Ajax返回的数据，您应该在ViewModel上具有.observable（）或.observablearray（）属性。返回AJAX调用后，只需将您的ViewModel Properties Array设置为新数据即可。对观察（）属性的所有引用将"自动"更新

通过将您的ViewModel属性声明为可观察的，您无需"重新涂"绑定。

Answer 2

您应该仅调用ko.applyBindings一次（最好在初始化期间），而不是每次加载新数据时。如果您在同一DOM部分上多次调用它，您将遇到错误。

阅读有关options绑定以处理<select>元素的绑定；最好通过敲除本身来处理与用户界面的大部分互动，而不是使用jQuery手动操纵DOM和设置处理程序。