Question

我通过jQuery向div添加一个类，我希望将该类传递回我的viewModel。我已经研究过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"反映在图标上。我需要将该类传递回我的viewModel 呃只是打字出来没有意义。我可能需要重新评估我的策略。

Answer 1

我尝试在没有任何jQuery选择器的情况下编写我的淘汰赛。没有。你用jQuery做的一切（好吧，大多数）都可以用一个敲除绑定来完成，或者至少是一个自定义绑定，它从你的视图模型中抽象出jQuery的东西。

所以不是手动循环使用sponsorFilters来创建下面的样本，为什么不使用foreach绑定呢？

在您的viewmodel中

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>

Answer 2

我最终编写了一个自定义绑定处理程序 - 感谢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 }"  />

knockout.js - 将类存储到viewModel

2 个答案: