Вопрос по twitter-bootstrap-3, knockout-3.0, typeahead.js – Typeahead.js не работает в Knockout 3 привязка foreach

4

Я обновил веб-приложение до Bootstrap 3 и Knockout 3 и, следовательно, потерял встроенный typeahead, который был в Bootstrap 2. Я добавил typeahead.js, и он прекрасно работает, если у меня нет typehahead в привязке Kachckout 'foreach'. Я включил код, который работает и терпит неудачу ниже, наряду с кодом Javascript для привязки typeahead и Bootstrap. Есть идеи?

<form role="form">
    <div class="row">
        <div class="col-sm-4 form-group">
            <input type="text" class="form-control sectionNames" data-bind="value: name" />
        </div>
    </div>
    <div data-bind="foreach: section">
        <div class="row">
            <div class="col-sm-4 form-group">
                <input type="text" class="form-control sectionNames" data-bind="value: name" />
            </div>
        </div>
    </div>
</form>

Javascript для привязок typeahead.js и Knockout

<script>
    $( document ).ready(function() {
        $('input.sections').typeahead({
            name: 'sectionName',
            local: [
                'ABC',
                'DEF'
            ]
        });

        ko.applyBindings({
            section : [
                { name: "", other: "1234" },
                { name: "", other: "5678" }
            ]
        });
    });
</script>

Ваш Ответ

2   ответа
7

особенно когда вы визуализируете элементы с помощью шаблона / потока управления, является использование пользовательской привязки для инициализации виджета. Например, вы можете использовать что-то вроде этого:

ko.bindingHandlers.typeahead = {
    init: function(element, valueAccessor) {
        var options = ko.unwrap(valueAccessor()) || {},
            $el = $(element),
            triggerChange = function() {
                $el.change();   
            }

        //initialize widget and ensure that change event is triggered when updated
        $el.typeahead(options)
            .on("typeahead:selected", triggerChange)
            .on("typeahead:autocompleted", triggerChange);        

        //if KO removes the element via templating, then destroy the typeahead
        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            $el.typeahead("destroy"); 
            $el = null;
        }); 
    }
};

Вот образец:http://jsfiddle.net/rniemeyer/uuvUR/

@RPNiemeyer -Sir вы увидите это один разstackoverflow.com/questions/25498721/... user3145373 ツ
@PWKad - хорошо, я обновил оригинал. Спасибо! RP Niemeyer
Спасибо, Райан. Хотя это сложнее, чем я надеялся, я всегда ценю ваши информативные и наглядные ответы. Очень ценю, что вы нашли время для создания jsfiddle! Я посмотрю, смогу ли я заставить это работать в моем приложении сейчас. RickM
Райан по какой-то причине Typeahead.js больше не доступен в этой скрипке из CDN - я исправил ссылку на cdnjs -jsfiddle.net/uuvUR/12 - Не могли бы вы обновить для будущих пользователей, и я удалю этот комментарий? PW Kad
2

которые отвечают за valueUpdate в KO

<input type="text"
       class="form-control sectionNames"
       data-bind="
           value: name, 
           valueUpdate: 'typeahead:selected typeahead:autocompleted"
/>

Похожие вопросы