1

jQuery を使用して div にクラスを追加しています。そのクラスをビューモデルに戻したいと考えています。私は ko.datafor() を調べましたが、私が望むものを達成していないようです (または、適切に使用する方法がわからない可能性が十分にあります)。これを達成するための最良のアプローチは何ですか？

編集-もう少し説明しましょう：

カラーピッカーとノックアウトの統合に取り組んでいます。カラー ピッカー アイコンをクリックすると、選択する色のリストが次のように作成されます。

    for (var i = 1; i < self.SponsorFilters().length; i++) {
                        var filter = self.SponsorFilters()[i];
                        if (filter.CssStyle() != null) {
                            $('.simplecolorpicker.picker').append('<div class="swatch' + i + '" role="button" tabindex="0">&nbsp;&nbsp;&nbsp;&nbsp;</div>');
                            $(".simplecolorpicker.picker .selected").hide();

                        }
                    }

次に、必要な色を選択すると、 を介してアイコンに反映されます"swatch+i"。そのクラスをビューモデルに戻す必要があります。
うーん、これを入力するだけでは意味がありません。戦略を再評価する必要があるかもしれません。

4

2 に答える 2

1

jQueryセレクターをまったく使用せずにノックアウトを作成しようとしています。なし。0. jQuery を使用して行うことはすべて (まあ、ほとんど)、代わりにノックアウト バインディング、または少なくともビューモデルから jQuery を抽象化するカスタム バインディングを使用して行うことができます。

それでは、sponsorFilters を手動でループして以下のスウォ​​ッチを作成する代わりに、foreach バインディングを使用してみませんか?

ビューモデルで

self.SponsorFiltersWithCSS = ko.computed(function() {
  var sponsorFilters = self.SponsorFilters();
  var filteredFilters = []
  for(var i = 0;i<sponsorFilters.length;i++) {
    if(sponsorFilters[i].CssStyle() != null) {
      filteredFilters.push(sponsorFilters[i]);
    }
  }
  return filteredFilters;
})

マークアップ

<div class="swatches" data-bind="foreach:SponsorFiltersWithCSS">
  <div role="button" data-bind="attr:{'class':'swatch' + $index}">&nbsp;&nbsp;&nbsp;&nbsp;</div>
</div>
于 2013-03-27T23:02:30.880 に答える
0

カスタム バインディング ハンドラーを作成することになりました - Tyrsius さんに感謝します!

ノックアウト

    ko.bindingHandlers.colorPicker = {
            init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
                var value = valueAccessor();
                $(element).val(ko.utils.unwrapObservable(value));
                $(element).colorPicker();
                $(element).change(function () {
                    value(this.value);
                });
            }
        };

HTML

     <input class="jqColourPicker" type="text" data-bind="colorPicker: ColorCode, event: { change: $root.AdminSaveSponsorStyle }"  />
于 2013-04-17T14:50:16.987 に答える