Question

我正在寻找一种干净的方式来实现以下内容。我们假设我有5个按钮：

（狗） - （猫） - （鱼） - （鸟） - （其他）

在我的ViewModel中，这些按钮表示为分类。因此，当我单击Dog按钮时，我的ViewModel中的observable应设置为Dog（这将通过每个按钮上的单击绑定完成）。

另外，我想在切换其中一个按钮时显示一个特定的样式（通过按钮上的css绑定完成）：

（狗） - （猫） - （鱼） - （鸟） - （其他）

所以现在这看起来应该将我的按钮变成单选按钮组。除此之外，当我点击“其他”按钮时，我还想显示一个小的弹出窗口（bootstrap），用户可以在其中指定自定义值，如“Lion”。单击其他按钮将关闭弹出窗口。

现在在每个按钮上我都可以添加类似于这个的绑定：

{ css: { 'toggled': classficationMatches('Dog') }, 
     popover: { action: 'close', id: 'mypopover' },
     click: { click:setClassification.bind($data, 'Dog') }

但这感觉很脏。我更喜欢构建自定义处理程序并像这样使用它：

{ toggleClassification: { type: 'Dog', popover: 'mypopover' } }

现在由ViewModel决定弹出窗口是否可见，绑定将包含添加css绑定，点击和弹出窗口绑定到按钮的所有逻辑。

我开始使用自定义绑定尝试一些东西，但这段代码看起来更糟糕：

ko.bindingHandlers["toggleClassification"] = {
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        var classification = $(element).attr('data-type');
        var selector = ko.utils.unwrapObservable(valueAccessor());

        var pickerViewModel = new SimpleFilterSpecializationPickerViewModel(element, selector);

        // Whenever we click the button, show the popover.
        ko.utils.registerEventHandler(element, "click", function () {
            // Hide the popup if it was visible.
            if (pickerViewModel.isVisible()) {
                pickerViewModel.hide();
            }
            else {
                var requireInit = !pickerViewModel.loaded();

                // Show the popover.
                pickerViewModel.show();

                // The first time we need to bind the popover to the view model.
                if (requireInit) {
                    ko.applyBindings(viewModel, pickerViewModel.getPopoverElement());

                    // If the classification changes, we might not want to show the popover.
                    viewModel.isClassification(classification).subscribe(function () {
                        if (!viewModel.isClassification(classification)()) {
                            pickerViewModel.hide();
                        }
                    });
                }
            }

            $('button[data-popoverclose]').click(function () {
                $(element).popover('hide');
            });
        });
    }
};



ko.bindingHandlers["toggleClassification"] = {
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {

        // Store the current value on click.
        $(element).click(function () {
            var observable = valueAccessor();
            viewModel.setClassification(observable);
        }); 

        // Update the css of the button.
        ko.applyBindingsToNode(element, { css: { 'active': viewModel.isClassification(valueAccessor()) } }, viewModel);
    }
};

任何人都有关于如何清理我的绑定的一些提示，因此大多数'逻辑'都可以在ViewModel中完成？

Answer 1

你可以添加这个＆＃34;脏＆＃34;以编程方式与
绑定 ko.applyBindingsToNode(Element element, Object bindings, Object viewModel)
例如
HTML

data-bind="toggleClassification: { type: 'Dog', popover: 'mypopover' }"

<强> JS

ko.bindingHandlers["toggleClassification"] = 
{
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) 
    {
        var type = valueAccessor().type;       // 'Dog'
        var popover = valueAccessor().popover; // 'mypopover'
        var binding = { 
                         css: { 'toggled': classficationMatches(type) }, 
                         popover: { action: 'close', id: popover },
                         click: { click:setClassification.bind(bindingContext.$data, type) }
                      };
        ko.applyBindingsToNode(element, binding , viewModel);
    }
};

创建一个没有业务逻辑的干净的Knockout绑定（Popover - Radio Buttons）

1 个答案: