Twitter Bootstrap lựa chọn typeahead không bị ràng buộc bởi KnockoutJS

Question

Ok, tôi đã chiến đấu với vấn đề này trong nhiều giờ ngay bây giờ và thu hẹp vấn đề này một Fiddle

Vấn đề rất đơn giản là, khi tôi đang sử dụng typeahead twitter bootstrap của cắm trên nhập văn bản và thực hiện lựa chọn, giá trị không cập nhật trong KnockoutJS ViewModel. Tôi biết tôi có thể hack nó để làm việc nhưng phải có một cái gì đó mà tôi đang thiếu ở đây.

Về cơ bản những gì tôi có là:

Knockout Binding

// Bind twitter typeahead 
ko.bindingHandlers.typeahead = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
     var $element = $(element); 
     var allBindings = allBindingsAccessor(); 
     var typeaheadArr = ko.utils.unwrapObservable(valueAccessor()); 

     $element.attr("autocomplete", "off") 
       .typeahead({ 
        'source': typeaheadArr, 
        'minLength': allBindings.minLength, 
        'items': allBindings.items, 
        'updater': allBindings.updater 
       }); 
    } 
}; 

Knockout ViewModel

function MyModel(){ 
    var self = this; 
    self.productName = ko.observable(); 
    self.availableProducts = ['One', 'Two', 'Three']; 
} 

ko.applyBindings(new MyModel()); 

HTML

<input type="text" data-bind="typeahead:availableProducts, value:productName"/> 

Phần còn lại của nội dung chỉ đơn giản là đến từ Twitter Bootstrap.

Answer 1

Một giải pháp là thay đổi chức năng updater của bạn khi bạn cần phải lấy các quan sát được sử dụng trong value ràng buộc và cập nhật nó với chức năng paramter:

'updater': function(item) { 
    allBindings.value(item); 
    return item; 
} 

Demo JSFiddle.

Nếu bạn không phải là tác giả của việc ràng buộc bạn hơn bạn có thể sử dụng tùy chọn updater để chỉ định chức năng updater

data-bind="typeahead:availableProducts, 
      updater: function(item) { productName(item); return item; }" 

Bởi vì các updater nên trả về các mục đã chọn cú pháp của điều này là không tốt đẹp như vậy.

Demo JSFiddle.

Answer 2

updater này thứ không làm việc cho tôi, đây là những gì đã làm

ko.bindingHandlers.typeahead = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
     var $element = $(element); 
     var allBindings = allBindingsAccessor(); 
     var typeaheadArr = ko.utils.unwrapObservable(valueAccessor()); 

     var updateValues = function (val) { 
      allBindings.value(val); 
     }; 

     $element.attr("autocomplete", "off") 
       .typeahead({ 
        'local': typeaheadArr, 
        'minLength': allBindings.minLength, 
        'items': allBindings.items, 
       }).on('typeahead:selected', function (el, item) { 
        updateValues(item.value); 
       }).on('typeahead:autocompleted', function (el, item) { 
        updateValues(item.value); 
       }); 
    } 
}; 

Answer 3

Tôi muốn giữ danh sách đề xuất autocomplete của tôi tách rời khỏi Knockout hoàn toàn. Tôi chỉ muốn Knockout biết khi người dùng thực sự đã nhập giá trị.

Điều này gần hơn với kỹ thuật của người dùng2576666, vì nó sử dụng Typeahead's custom events để buộc cập nhật trong mô hình Knockout khi có lựa chọn hoặc tự động hoàn thành. Tuy nhiên, nó không đòi hỏi một ràng buộc tùy chỉnh typeahead, và cũng không yêu cầu các giá trị được lưu trữ trong Knockout ViewModel. Điều này mở ra phạm vi để hoàn thành tùy biến hơn xuống dòng (chẳng hạn như sử dụng Bloodhound), điều này sẽ trở nên vô ích nếu chúng tôi cố gắng lưu trữ nó trong mô hình Knockout. ViewModel của tôi chắc chắn không phải là nơi thích hợp để lưu trữ các tùy chọn tự động hoàn thành cho trường hợp sử dụng của tôi (và, tôi sẽ đề xuất, nhiều trường hợp khác - đặc biệt nếu bạn có danh sách tiềm năng lớn cần dân số động).IMO phiên bản này cũng là dễ hiểu:

var availableProducts = ['One', 'Two', 'Three']; 

var substringMatcher = function(strs) { 
    return function findMatches(q, cb) { 
    var matches, substrRegex; 
    matches = []; 
    substrRegex = new RegExp(q, 'i'); 
    $.each(strs, function(i, str) { 
     if (substrRegex.test(str)) { 
     matches.push({ value: str }); 
     } 
    }); 
    cb(matches); 
    }; 
}; 


function MyModel(){ 
    var self = this; 
    self.productName = ko.observable(); 
} 

var myModel = new MyModel(); 

ko.applyBindings(myModel); 

var onUpdated = function($e, datum) { 
    myModel.productName(datum.value); 
}; 

$(".typeahead") 
    .typeahead(
     {hint: true, minLength: 1, highlight: true}, 
     {displayKey: 'value', source: substringMatcher(availableProducts)}) 
    .on('typeahead:autocompleted', onUpdated) 
    .on('typeahead:selected', onUpdated); // for knockoutJS 

Tôi đã, tất nhiên, lưu này như a JSFiddle: