javascript and knockout combobox

Question

ノックアウトオブジェクトを更新するために隠れたドロップダウンリストを使用するjquery UIコンボボックスがあります。ドロップダウンリストを表示すると、ノックアウトオブジェクトが適切に更新され、値が変更されます。コンボボックスの値を変更すると、ドロップダウンに変更が反映されますが、ノックアウトオブジェクトは変更されません。ドロップダウンリストの値が変更されても、changesubgroupは呼び出されません。私はchangesubgroupイベントを発生させるために必要です。

 EmployerGroupModel.prototype.ChangeSubGroup = function() { 
    try { 
     if (this.CurrentSubGroupValue()) { 
      var tempGroupsResults; 
      var updateCurrentSubGroup = false; 
      var len = this.SubGroupsResults().length - 1; 
      for (i = 0; i < len; i++) { 
       if (this.CurrentSubGroup() != undefined) 
       { 
        if (this.CurrentSubGroup().EMPL_GRP_DTL_KY != undefined) { 
         if (this.SubGroupsResults()[i].EMPL_GRP_DTL_KY == this.CurrentSubGroup().EMPL_GRP_DTL_KY) { 
          if (this.SubGroupsResults()[i] != this.CurrentSubGroup()) 
          { 
           tempGroupsResults = this.SubGroupsResults().filter(this.ExcludeFilter); 
           tempGroupsResults.push(this.CurrentSubGroup()); 
           this.SubGroupsToUpdate.push(this.CurrentSubGroup()); 
           updateCurrentSubGroup = true; 
          } 
         } 
        } 
       } 
      } 
      var myObject = this.SubGroupsResults().filter(this.ArrayFilter)[0]; 
      if (updateCurrentSubGroup) 
      { 
       this.SubGroupsResults(this.tempGroupsResults()); 
      } 
      this.CurrentSubGroup(myObject); 
     } 

    } catch (e) { 
     alert(e.toString()); 
    } 

}; 

Answer 1

これは完全にあなたの質問に答えているのですが、カスタムバインディングが必要なのかどうかわかりませんか？ http://knockoutjs.com/documentation/custom-bindings.html

ここで私はオートコンプリートのためにしたコンボボックスは、コンボボックスとかなり似ているはずです。

https://jsfiddle.net/othkss9s/26/

ので、ここで結合があります。

ko.bindingHandlers.autocomplete = { 
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
     ko.bindingHandlers.value.init(element,valueAccessor, allBindings); 
     var source = allBindings.get('autocompleteOptions'); 
     var sourceUnwrapped = ko.unwrap(source); 
      $(element).autocomplete({ 
      source: sourceUnwrapped, 
      select: function(event, ui) { 
      var value = valueAccessor(); 
      value(ui.item.value); 
        } 
      }); 
    }, 
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
     var value = valueAccessor(); 
     ko.bindingHandlers.value.update(element,valueAccessor); 
    } 
}; 

jquery UIオートコンプリートを使用してカスタムハンドラのinit部分に設定しました。オートコンプリートオプションと呼ばれる配列が必要です。

ここではそれを使用するhtmlです。あなたはそれを見るためにフィドルに行きたくない場合は、ここで

<div class="ui-widget"> 
    <label for="tags2">Tags: </label> 
    <input id="tags2" data-bind="autocomplete: tags2, autocompleteOptions: availableTags "> 
</div> 

は全体のことです。あなたはオートコンプリートを得るために入力を開始することができます。 1つをクリックすると、あなたはまた、使用して自動補完リストにテキストボックスを複数の項目を追加し、ボタン

ko.bindingHandlers.autocomplete = { 
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
     ko.bindingHandlers.value.init(element,valueAccessor, allBindings); 
     var source = allBindings.get('autocompleteOptions'); 
     var sourceUnwrapped = ko.unwrap(source); 
      $(element).autocomplete({ 
      source: sourceUnwrapped, 
      select: function(event, ui) { 
      var value = valueAccessor(); 
      value(ui.item.value); 
        } 
      }); 
    }, 
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
     var value = valueAccessor(); 
     ko.bindingHandlers.value.update(element,valueAccessor); 
    } 
}; 



function model() { 
    var self = this; 
this.tags2 = ko.observable("BASIC") 
this.newTag = ko.observable(""); 
this.availableTags = ko.observableArray([ 
    "ActionScript", 
     "AppleScript", 
     "Asp", 
     "BASIC", 
     "C", 
     "C++", 
     "Clojure", 
     "COBOL", 
     "ColdFusion", 
     "Erlang", 
     "Fortran", 
     "Groovy", 
     "Haskell", 
     "Java", 
     "JavaScript", 
     "Lisp", 
     "Perl", 
     "PHP", 
     "Python", 
     "Ruby", 
     "Scala", 
     "Scheme", 
     "Prepositions are not real" 
]); 
this.add = function(){ 
    self.availableTags.push(self.newTag()); 
} 
}; 

var myViewModel = new model(); 

$(document).ready(function() { 
    ko.applyBindings(myViewModel); 


    $("#tags").autocomplete({ 
     source: myViewModel.availableTags(), 
     select: function(event, ui) { 
     myViewModel.tags(ui.item.value); 
     } 
    }); 

}); 

を追加することができますノックアウト値（下のラベル）を更新し、ここにHTMLが

<div class="ui-widget"> 
    <label for="tags2">Tags: </label> 
    <input id="tags2" data-bind="autocomplete: tags2, autocompleteOptions: availableTags "> 
</div> 
<br/> 
you chose <span data-bind="text:tags2"></span> 
<br/> 
<p> 
Add something to the autocomplete list: <input data-bind="textInput: newTag"/> 
<button data-bind="click: add" > 
+ 
</button> 
</p> 

です