Question

我有一个jquery ui组合框，它使用隐藏的下拉列表来更新挖空对象。如果我显示下拉列表，则适当更新knockout对象是我更改了值。如果我更改组合框值，则下拉列表会更改以反映此情况，但敲除对象不会发生任何变化。即使下拉列表的值发生变化，也永远不会调用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 autocomplete并将其设置在自定义处理程序的init部分中。它需要一个我称之为自动完成选项的数组。

这是使用它的html。

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

如果你不想去小提琴看它，这就是整件事。您可以开始输入输入以获得自动完成功能。点击一个更新淘汰值（下面的标签）你也可以通过使用文本框和添加按钮将更多项目添加到自动完成列表

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>

javascript和淘汰组合框

1 个答案: