2016-09-05 4 views
1

のcreateElement機能

以下
<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 
    }" /> 

はKnockout.jsハンドラです:

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"); 
     } 
    };})(); 

、エラーメッセージ下のみMAC(OS)&サファリ(Webブラウザ)をとして示されると:

メッセージ:datalist:function(){return {options:app.viewModel.riderProfiles()、optionsValue: 'Id'、optionsText: '名前'、値:app.viewModel.selectedRiderId}} 「

メッセージ:不定(​​評価対象ではない 『u.innerHTML =『と』』)

+2

Safariは ''仕様の一部である 'list'属性をサポートしていない可能性がありますか? https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist#Browser_compatibility – user3297291

+0

Safariブラウザで編集可能なドロップダウン用のソリューションを共有できますか? –

答えて

0

HTML要素は、他のコントロールのために利用可能な値を表す要素のセットを含みます。

ただし、「Safari」ブラウザはサポートしていません。

関連する問題