2013-04-07 90 views
3

我正在嘗試我的手在Knockout.js的自動完成處理程序,我正在尋找一些反饋。目前這種方法很有效,但我試圖看看是否可以在沒有這麼多Eval()的情況下完成工作,並且爲了可重用性,請查看是否有方法在不預先假定的情況下引用ViewModel被命名爲'vm',如下所示。Knockout.js自動完成綁定處理器

用法:

<input placeholder="Test..." type="search" data-bind="autoComplete:$root.persons, source:'/api/Person/', parameterName:'searchString', labelKey:'displayName', valueKey:'urid', onSelected:'addPerson'" autocomplete="off" /> 

JS:

ko.bindingHandlers.autoComplete = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
     var postUrl = allBindingsAccessor().source; // url to post to is read here 
     var param = allBindingsAccessor().parameterName; 
     var labelKeyName = allBindingsAccessor().labelKey; 
     var valueKeyName = allBindingsAccessor().valueKey; 
     var selectedFunction = allBindingsAccessor().onSelected; 
     var selectedObservableArrayInViewModel = valueAccessor(); 

     $(element).autocomplete({ 
      minLength: 2, 
      autoFocus: true, 
      source: function (request, response) { 
       $.ajax({ 
        url: param != null ? postUrl : postUrl + request.term, 
        data: param == null ? '' : param + "=" + request.term, 
        dataType: "json", 
        type: "GET", 
        success: function (data) { 
         response($.map 
          (data, function (obj) { 
           return { 
            label: eval("obj." + labelKeyName), 
            value: eval("obj." + valueKeyName) 
           }; 
          })); 
        } 
       }); 
      }, 
      select: function (event, ui) { 
       if (selectedFunction != null) { 
        var functionCall = 'vm.' + selectedFunction + "(event, ui)"; 
        eval(functionCall); 
       } 
      } 
     }); 
    } 
}; 
+0

你知道你不_need_'的eval()'通過名稱訪問屬性可以發現,只要做'obj [propertyName]',你明白了... – 2013-04-08 00:40:01

回答

4

一些靈感,我想看看瑞恩Niemeyers回答這個stackoverflow post,這是最全面的自動完成綁定處理程序我都看到了。

另一種,但更簡單的自動完成功能結合其我的團隊和我爲我們自己的目的而創建的處理程序可以在這個stackoverflow post