2013-04-07 91 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