從自定義綁定處理程序中訪問jQuery對象

Question

我想訪問一個jQuery對象，這恰好是一個輸入文本框來做一些驗證並添加日期選擇器，但不幸的是我無法這樣做。

我正在與KnockoutJS合作。

如果'Datatype'碰巧是'Date'或'Datetime'，我想訪問'input'並調用它的datepicker（）。但每當我嘗試使用.closest('td').next('td').html()進行搜索時，我都會得到一個null（來自自定義綁定內）。試一試，以便我可以根據數據類型'td'在輸入上調用datetimepicker構造函數。

下面是我試圖用

的jsfiddle工作小提琴：http://jsfiddle.net/sourabhtewari/nkkt88v2/2/

var format = function (str, col) { 
    col = typeof col === 'object' ? col : Array.prototype.slice.call(arguments, 1); 

    return str.replace(/\{\{|\}\}|\{(\w+)\}/g, function (m, n) { 
     if (m == "{{") { 
      return "{"; 
     } 
     if (m == "}}") { 
      return "}"; 
     } 
     return col[n]; 
    }); 
}; 

var data = ko.observableArray([{ 
    paramKey: ko.observable('keyName'), 
    paramValue: ko.observable('Test1'), 
    dataType: ko.observable('Date') 
}]); 


var ParamConstr = function (key, value, dataType) { 
    return { 
     ParamKey: ko.observable(key), 
     ParamValue: ko.observable(value), 
     DataType: ko.observable(dataType) 

    }; 
}; 
var my = my || {}; 
function Generator() { }; 

Generator.prototype.rand = Math.floor(Math.random() * 26) + Date.now(); 

Generator.prototype.getId = function() { 
    return this.rand++; 
}; 
var idGen = new Generator(); 
//var ParamData = ko.observableArray([]); 
my.viewModel = { 
    ParamData : ko.observableArray([]), 
    addParam: function() { 
     this.ParamData.push(new ParamConstr("$$" + "key1", "value1","Date")); 
    }}; 

ko.bindingHandlers.hidden = { 
    update: function (element, valueAccessor) { 
     ko.bindingHandlers.visible.update(element, function() { return !ko.utils.unwrapObservable(valueAccessor()); }); 
    } 
}; 


ko.bindingHandlers.clickToEdit = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, context) { 

     var observable = valueAccessor(), 
      link = document.createElement("a"), 
      input = document.createElement("input"); 

     var id = idGen.getId(); 
     input.setAttribute("id", id); 

     element.appendChild(link); 
     element.appendChild(input); 


     console.log(document.getElementById(id).id); 

     var dataType = $(format("#{0}", id)).parent().next('td').html(); 
     //.parent().next().html(); 
     //.closest('td').next('td').html().toString(); 
     console.log(dataType); 

     switch ($(format("#{0}", id)).parent().next('td').html()) { 

      case "Datetime": 
       $(format("#{0}", id)).datetimepicker(); 
       break; 

      case "Date": 
       $(format("#{0}", id)).datetimepicker({ 
        timepicker: false, 
        format: 'Y/m/d' 
       }); 
       break; 
     } 

     observable.editing = ko.observable(false); 

     ko.applyBindingsToNode(link, { 
      text: observable, 
      hidden: observable.editing, 
      click: observable.editing.bind(null, true) 
     }); 

     ko.applyBindingsToNode(input, { 
      value: observable, 
      visible: observable.editing, 
      hasfocus: observable.editing, 
      event: { 
       keyup: function (data, event) { 
        //if user hits enter, set editing to false, which makes field lose focus 
        if (event.keyCode === 13) { 
         input.blur(); 
         observable.editing(false); 
         return false; 
        } 
        //if user hits escape, push the current observable value back to the field, then set editing to false 
        else if (event.keyCode === 27) { 
         observable.valueHasMutated(); 
         observable.editing(false); 
         return false; 
        } 

       } 
      } 
     }); 
    } 
}; 

ko.applyBindings(my.viewModel); 

HTML：

<div> 
    <button id="InputSubmitBtn" type="submit" class="btn btn-custom" data-bind="click: addParam"><span class="glyphicon glyphicon-plus-sign"></span>&nbsp;Add</button> 
</div> 
<table class="table table-hover table-condensed"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Value</th> 
      <th>Data type</th> 
     </tr> 
    </thead> 
    <tbody data-bind="foreach: ParamData"> 
     <tr> 
      <td data-bind="text: ParamKey" style="width: 20%"></td> 
      <td data-bind="clickToEdit: ParamValue" data-text="" style="width: 20%"></td> 
      <td data-bind="text: DataType" style="width: 20%"></td> 
     </tr> 
    </tbody> 
</table> 

任何幫助，我怎麼能解決這個問題將是巨大的！

Answer 1

所以看來你從G_S得到了答案。

如果有人想知道什麼是正確的選擇，var dataType = $(element).next().text();完美的工作。你無法訪問任何數據，因爲在通話時，它還沒有。您可以嘗試var dataType = $(element).prev().text();並查看您可以檢索$$ key1。

Fiddle

無論如何，你得到了回答，我沒有進一步的挖掘就如何解決這個問題，有一個美好的一天:)