استخدام الضربة القاضية مع Typeahead.js وBloodhound.js v0.10

Question

لقد قمت للتو بالتحويل إلى استخدام Bloodhound.js وTypehead.js مع Knockout.أواجه بعض المشاكل -

1. رأس الكتابة لا يعرض Name الخاصية في قائمة الاقتراحات
2. لا يمكنني معرفة كيفية تحديث المجموعة للاستعلام عنها

http://jsfiddle.net/Ea93f/2/

أقوم بإضافة بيانات جديدة "بشكل ثابت" الآن ولكن من المفترض أن تظهر في مجموعة النتائج، وهي ليست كذلك

self.addNew = function () {
    self.someOptions.push(new Option(self.someOptions().length + 1, 'Johnnn'));
}

أنا مستعد لأية اقتراحات ناجحة، لذا فأنا لست عالقًا في استخدام Bloodhound.js إذا لم يكن ذلك مطلوبًا، ولكن نظرًا لطبيعة التطبيق الخاص بي، لا يمكنني إزالة الخصائص كعناصر يمكن ملاحظتها، ولكن الاتصال بـ ko.toJS في مرحلة ما هو أمر غير مقبول. بالتأكيد خيار.

Answer 1

المشكلة الأولى تتعلق بمفتاح العرض.تحتاج إلى توفير وظيفة واضحة في الربط الخاص بك

لغة البرمجة

<input type="text" data-bind="typeahead: { name: 'something', taOptions: theseOptions, displayKey: 'Name' }, value: thisValue" />

جافا سكريبت

    // In ko.bindingHandlers.typeahead.init function
    var displayKey = options.displayKey;
    options.displayKey = function(item) {
        return item[displayKey]();
    };

المشكلة الثانية هي مع استخدام المحلية.يبدو أن النظام لا يقوم بإعادة حساب المصدر بعد التهيئة.عند النظر إلى المستندات، ربما تحتاج إلى الاستفادة من الخيار البعيد والتظاهر بأنه طلب/استجابة ajax.تحتاج أيضًا إلى تنفيذ مرشح النتائج الخاص بك، بالإضافة إلى اختراق أي من requestCache عند تحديث الخيارات.

لقد قمت بتحديث الخاص بك jsFiddle كالآتي...

self.theseOptions = new Bloodhound({
  datumTokenizer: function(d) { 
      var seomth = Bloodhound.tokenizers.whitespace(d.Name());
      console.log(seomth);
      return seomth },
  queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote : {
        url : '%QUERY',
        transport : function(url, options, onSuccess, onError) {
            var deferred = $.Deferred();
            deferred.done( function() { onSuccess(this); });

            var filterVal = url.toLowerCase();
            var result = self.someOptions().filter( function(item) {
                return !!~item.Name().toLowerCase().indexOf(filterVal);
            });
            deferred.resolveWith( result );
            return deferred.promise();
        }

    }
  //local: self.someOptions()
});

self.addNew = function () {
    self.someOptions.push(new Option(self.someOptions().length + 1, 'Johnnn'));
    self.theseOptions.transport.constructor.resetCache();
}