2016-09-05 1 views
1

ich unten Code haben Ausgliederungs zu erstellen:create Funktion nicht mit MAC Safari arbeiten

Below-Code für HTML Ausgliederungs zu machen, wie:

<input class="form-control selectedTextBox mobile-space" list="rider" type="text" id="ridername" placeholder="FirstName LastName" 
    data-bind="trimedValue: item().Name, datalist: { 
     options: app.viewModel.riderProfiles(), 
     optionsValue: 'Id', 
     optionsText: 'Name', 
     value: app.viewModel.selectedRiderId 
    }" /> 

Unten ist Knockout.js Handler:

:
ko.bindingHandlers.datalist = (function() { 
    function getVal(rawItem, prop) { 
     var item = ko.unwrap(rawItem); 
     return item && prop ? ko.unwrap(item[prop]) : item; 
    } 

    function findItem(options, prop, ref) { 
     return ko.utils.arrayFirst(options, function (item) { 
      return ref === getVal(item, prop); 
     }); 
    } 
    return { 
     init: function (element, valueAccessor, allBindingsAccessor) { 
      var setup = valueAccessor(), 
       textProperty = ko.unwrap(setup.optionsText), 
       valueProperty = ko.unwrap(setup.optionsValue), 
       dataItems = ko.unwrap(setup.options), 
       myValue = setup.value, 
       koValue = allBindingsAccessor().value, 
       datalist = document.createElement("DATALIST"); 

      // create an associated <datalist> element 
      datalist.id = element.getAttribute("list"); 
      document.body.appendChild(datalist); 

      // when the value is changed, write to the associated myValue observable 
      function onNewValue(newVal) { 
       var dataItems = ko.unwrap(setup.options), 
        selectedItem = findItem(dataItems, textProperty, newVal), 
        newValue = selectedItem ? getVal(selectedItem, valueProperty) : void 0; 

       if (ko.isWriteableObservable(myValue)) { 
        myValue(newValue); 
       } 
      } 

      // listen for value changes 
      // - either via KO's value binding (preferred) or the change event 
      if (ko.isSubscribable(koValue)) { 
       koValue.subscribe(onNewValue); 
      } else { 
       ko.utils.registerEventHandler(element, "change", function() { 
        onNewValue(this.value); 
       }); 
      } 

      // init the element's value 
      // - either via the myValue observable (preferred) or KO's value binding 
      if (ko.isObservable(myValue) && myValue()) { 
       element.value = getVal(findItem(dataItems, valueProperty, myValue()), textProperty); 
      } else if (ko.isObservable(koValue) && koValue()) { 
       onNewValue(koValue()); 
      } 
     }, 
     update: function (element, valueAccessor) { 
      var setup = valueAccessor(), 
       datalist = element.list, 
       dataItems = ko.unwrap(setup.options), 
       textProperty = ko.unwrap(setup.optionsText); 

      // rebuild list of options when an underlying observable changes 
      datalist.innerHTML = ""; 
      ko.utils.arrayForEach(dataItems, function (item) { 
       var option = document.createElement("OPTION"); 
       option.value = getVal(item, textProperty); 
       datalist.appendChild(option); 
      }); 
      ko.utils.triggerEvent(element, "change"); 
     } 
    };})(); 

Und mit nur MAC (OS) & Safari (Web-Browser) unter Fehlermeldung wird, wie gezeigt

Nachricht: Bindung kann nicht verarbeitet werden "datalist: function() {return {Optionen: app.viewModel.riderProfiles(), OptionenWert: 'Id', OptionenText: 'Name', Wert: app.viewModel.selectedRiderId}} "

Nachricht: undefiniert ist kein Objekt (‚u.innerHTML = ‚Auswerten‘‘)

+2

Könnte es sein, dass Safari das 'list' Attribut nicht unterstützt, da es Teil der' ' Spezifikation ist? https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist#Browser_compatibility – user3297291

+0

Können Sie bitte die Lösung für das editierbare Drop-Down mit dem Safari-Browser teilen. –

Antwort

0

das HTML-Element enthält eine Reihe von Elementen, die die Werte für andere Steuerelementen darstellen.

Aber "Safari" Browser unterstützt es nicht.

Verwandte Themen