1

我正在通过 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。
呃,只是把这个打出来是没有意义的。我可能需要重新评估我的策略。

4

2 回答 2

1

我尝试在没有任何 jQuery 选择器的情况下编写我的淘汰赛。没有任何。0. 你用 jQuery 做的所有事情(嗯,大多数)都可以用敲除绑定来完成,或者至少是一个自定义绑定,将 jQuery 东西从你的视图模型中抽象出来。

因此,与其手动循环通过赞助商过滤器来创建下面的样本,为什么不直接使用 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 回答