Twitter Bootstrap выбор машинописный не связан KnockoutJS

Question

Хорошо, я боролся с этой проблемой в течение нескольких часов в настоящее время и сузили вопрос очень простой Fiddle

Проблема в том, что, когда я использую машинописный Twitter Bootstrap в плагин на текстовый ввод и сделать выбор, это значение не обновляется в ViewModel KnockoutJS. Я знаю, что я мог бы взломать его на работу, но должно быть что-то, что мне здесь не хватает.

В основном то, что у меня есть:

Нокаут Связывание

// 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 
       }); 
    } 
}; 

Нокаут 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"/> 

Остальная часть материала просто происходит из Twitter Bootstrap.

Answer 1

Одним из решений являются модифицировать updater функции, где вы должны захватить наблюдаемые, используемые в value связывания и обновлять его с функцией параметром Я:

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

Демо JSFiddle.

Если вы не являетесь автор обязательного использования вами, вы можете использовать опцию updater для указания функции updater

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

Поскольку updater должен возвращать выбранный элемент, синтаксис этого не очень приятный.

Demo JSFiddle.

Answer 2

Этот материал обновления не работает для меня, вот что сделал

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

Я предпочитаю, чтобы мой список предложений автозаполнения отдельно от выбивания полностью. Я хочу, чтобы Knockout узнал, как только пользователь действительно ввел значение.

Это ближе к технике пользователя2576666, так как оно использует Typeahead's custom events для принудительного обновления в модели нокаута, когда есть выбор или автозаполнение. Тем не менее, он не требует специального привязки typeahead и не требует, чтобы значения сохранялись в модуле нокаута ViewModel. Это открывает возможности для более настраиваемого завершения работы по линии (например, с помощью Bloodhound), который будет бесполезно запутан, если мы попытаемся сохранить его в модели Knockout. Мой ViewModel определенно не подходит для хранения параметров автозаполнения для моего варианта использования (и, я бы предложил, многие другие, особенно если у вас есть потенциально большой список, который требует динамической совокупности).ИМО эта версия также проще понять:

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 

Я, конечно, сохранить это как a JSFiddle: