3

バインドされたドロップダウン リストで選択したアイテムを取得するのに問題があります。

<p>
  Your Group: 
  <select data-bind="options: availableGroups, optionsText: 'Name', optionsValue: 'GroupId', value: selectedGroup, optionsCaption: 'Choose...'"></select>
</p>
<p>
  I am visible
  You have chosen <span data-bind="text: selectedGroup() ? selectedGroup().Name : 'Nothing'"></span>
</p>

ドロップダウン リストから何かを選択すると、値ではなく、選択内容のテキストを取得したいと考えています。私はノックアウトに非常に慣れていないため、これを処理しようとしています。このためのフィドルを作成しました。

http://jsfiddle.net/voam/FjRxn/

4

6 に答える 6

2

この問題を解決するために最近使用したソリューションを投稿したかっただけです。バインディング ハンドラー (valueAppendText および textFromOption) を利用し、ドロップダウンによって追跡されているオブザーバブルにオブザーバブルを追加します。このソリューションは完全ではありませんが、ドロップダウン テキストを取得するために計算済みの追加を使用しないという考えを示しています。このソリューションでは jQuery も使用していますが、これは削除できますが、私のプロジェクトでは (ほとんどの場合) jQuery を使用しているため、残しました。以下の jsFiddle リンクは機能を示しています。

フィドル: http://jsfiddle.net/FjRxn/65/

マークアップ:

<select data-bind="options: availableGroups, optionsText: 'Name', optionsValue: 'GroupId', valueAppendText: selectedGroup, optionsCaption: 'Choose...'"></select>

<p>
    I am visible
    You have chosen <span data-bind="textFromOption: selectedGroup"></span>
    <div>
        Group Id: <span data-bind="text: selectedGroup"></span>
    </div>
</p>

バインディング ハンドラー:

ko.bindingHandlers.valueAppendText = {
    init: function(element, valueAccessor, allBindingsAccessor, context) {
      var $element, newValueAccessor, observable, setText;

      observable = valueAccessor();
      observable.selectedOptionText = ko.observable(null);
      newValueAccessor = function() {
        return observable;
      };
      $element = $(element);
      setText = function() {
        return observable.selectedOptionText($element.find("option:selected").text());
      };
      setTimeout(setText, 5);
      $element.change(function() {
        return setText();
      });
      return ko.bindingHandlers.value.init(element, newValueAccessor, allBindingsAccessor, context);
    },
    update: function(element, valueAccessor, allBindingsAccessor, context) {
      return ko.bindingHandlers.value.update(element, valueAccessor, allBindingsAccessor, context);
    }
  };

  ko.bindingHandlers.textFromOption = {
    update: function(element, valueAccessor, allBindingsAccessor, context) {
      var newValueAccessor, observable;

      observable = valueAccessor();
      newValueAccessor = function() {
        if (ko.isObservable(observable.selectedOptionText)) {
          return observable.selectedOptionText();
        }
        return observable();
      };
      return ko.bindingHandlers.text.update(element, newValueAccessor, allBindingsAccessor, context);
    }
  };
于 2013-12-12T04:14:28.390 に答える
2

元の質問に対して@Peteの答えは正しいですが、 GroupId を値として保持する必要があるため、これを行うことができます(変更されたフィドル)。

まず、selectedGroupプロパティの名前が に変更されましたselectedGroupId。

次に、新しい計算オブザーバブルselectedGroupが以下に基づいて定義されましたselectedGroupId。

self.selectedGroup = ko.computed(function () {
  for (var i = 0; i < groups.length; i++) {
    if (groups[i].GroupId == self.selectedGroupId())
      return groups[i];
  }
  return null;
});

もvar self = this定義された

于 2013-02-14T01:50:48.953 に答える
0

変化する

<select data-bind="options: availableGroups, optionsText: 'Name', optionsValue: 'GroupId', value: selectedGroup, optionsCaption: 'Choose...'"></select>

に：

<select data-bind="options: availableGroups, optionsText: 'Name', value: selectedGroup, optionsCaption: 'Choose...'"></select>
于 2013-02-13T21:41:30.083 に答える
0

個人的には、@ pomberの回答を少し編集して使用します。

self.selectedGroup = ko.computed(function(){
  return ko.utils.arrayFirst(self.availableGroups(), function(grp) {
    return grp.GroupId == self.selectedGroupId();
  }
}, this);

計算されたオブザーバブルで for ループを使用するのは好きではありません。

フィドル

于 2016-12-08T10:10:06.857 に答える
0

監視可能な selectedGroup で subscribe 関数を使用することもできます。「selectedGroupId」として別のオブザーバブルも作成しました。

購読イベントで、GroupId の値を新しい監視可能な「selectedGroupId」に割り当てます

 self.selectedGroup.subscribe(function(item)
     {
          debugger;
          self.selectedGroupId(item.GroupId);
          return item.Name;
      });

ここで更新されたフィドルを参照してください

于 2013-02-14T08:23:49.467 に答える