Knockout JS列表,使用自定义绑定绑定历史详细信息

时间:2013-05-09 08:48:55

标签: jquery knockout.js knockout-2.0 knockout-mapping-plugin

我有一份数据清单 用户将点击任何行并显示详细信息

将保存先前的用户选择,继续触发自定义绑定以调用ajax以检索数据

  var jsondata = [{
       "xxd": "1",
           "r_xd": "1",
           "fxd": 1,
           "dtxd": 1,
           "drxd": 1,
           "dsxd": 1,
           "x_ther": "1",
           "x_therslutxn": "1",
           "x_xsnd": true,
           "x_xsfxxed": true,
           "x_lat": "1",
           "x_ln": "1",
           "x_delete": false,
           "x_deldate": "2013-12-02T00:00:00",
           "s_c_by": 1
   }, {
       "xxd": "2",
           "r_xd": "2",
           "fxd": 2,
           "dtxd": 2,
           "drxd": 2,
           "dsxd": 1,
           "x_ther": "3",
           "x_therslutxn": "4",
           "x_xsnd": true,
           "x_xsfxxed": true,
           "x_lat": "1",
           "x_ln": "1",
           "x_delete": false,
           "x_deldate": "2013-12-02T00:00:00",
           "s_c_by": 321
   }];

   //-----------------get historical data
   //jQuery.support.cors = true;
   ko.bindingHandlers.history = {
       init: function (element, valueAccessor) {
           console.log('-------init history---------');
           //console.dir(element);
           var primaryId = valueAccessor();
           //console.log(primaryId);

           var itemData = null;
           // JSON RETURN DATA  

           $.post("/echo/json/", {
               json: JSON.stringify(jsondata)
           },

           function (data, textStatus, jqXHR) {
               console.log('getJSON');
               console.dir(data);
               new HistoryRowViewModel(data);
           });
       }
   };


   function HistoryRowViewModel(data) {
       //this.history = ko.observable(); 
       ko.mapping.fromJS(data, historymapping, vm.historys);
   }
   var historymapping = {
       key: function (data) {
           console.log(data);
           return ko.utils.unwrapObservable(data);
       },
       create: function (options) {
           console.log(options.data);
           return HistoryRowViewModel(options.data);
       }
   }

我的viewmodel返回如下:{“historys”:[null,null]}

     <table id="historical" data-bind="history:vm.primaryid()">      
    <pre data-bind="text: JSON.stringify(ko.toJS(vm), null, 2)"></pre>       
      <thead>    
        <tr data-bind="foreach: $parent">           
          <!--  <pre data-bind="text: JSON.stringify(ko.toJS($data)), null, 2)"></pre> -->   
          <th data-bind="text:$data">
          </th>          
        </tr>      
      </thead>                      
      <tbody>              
        <!-- ko foreach: vm.historys() -->       
        <tr data-bind="foreach: vm.historys()">                   
          <!-- ko foreach: $parent -->       
          <!--<pre data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></pre>    -->       
          <td data-bind="text:$data.incidentid"> </td>                                
          <!-- /ko -->                          
        </tr>                             
        <!-- /ko -->                        
      </tbody>                  
    </table>

这是mybinding的错吗?历史:vm.primaryid()

valueAccessor()返回我传递它的primaryid,我能够查询它

我的目的是推动每一行从jsondata返回

并将其绑定到我的视图。

我如何实现这一目标? 我的观念错了吗?

我已将其发布到(http://jsfiddle.net/sigibb/NsNvc/1/),但无法正常工作..我不知道如何将其与其他依赖项绑定。

0 个答案:

没有答案