Question

Example jsFiddle

我的模型中有一系列问题，其中包含以下属性：

id ：简单，问题的ID
文字：再次，问题的文字
父母：此问题依赖于
激活器：一个字符串数组，当父母的答案是其中一个值时 - 显示此问题
回答：此问题的答案
可见：一个布尔值，指示此问题是否应在表单上显示

我正在使用ko.mapping将JSON字符串（我正在从asmx web方法中检索）绑定到我的视图模型。

我有一堆没有parents或activators的主要问题，因为这些问题应始终可见，然后是一堆依赖在依赖者可见之前依赖于他们各自的父母具有特定值的问题。只要依赖家属（如果你明白我的意思），这可以延伸到这一点。

我最初的想法（因为我正在慢慢地通过knockout.js到达那里）是订阅我的answer的{{1}}属性，然后抓住一个依赖于一个刚刚回答。然后查看值，将它们与激活器进行比较，并根据需要显示/隐藏。

question

虽然这有效，但我不禁觉得我在这里错过了一招。我必须使用viewModel.questions().forEach(function (question) { question.answer.subscribe(function (value) { var dependents = viewModel.questions().filter(function (q) { return q.parents() && q.parents().indexOf(question.id()) !== -1; }); dependents.forEach(function (d) { if (d.activators() && d.activators().indexOf(value) !== -1) { d.visible(true); } else { d.visible(false); d.answer(null); } }); }); });将模型绑定到我的视图模型，因为它已经在asmx方法中为我创建了，所以我必须扩展我的视图模型（因为我在这里通过循环遍历所有{{} 1}}并订阅每一个。

也许我应该为{strong>可见属性使用ko.mapping，或者我应该创建某种自定义questions？我不确定。尝试实现我想要的正确的方式是什么？

Answer 1

有几种方法可以实现您所追求的目标，其中一种方法就是使用您提到的custom bindings。

这是否被认为是最“淘汰正确”的方式，我不会说，但这是一种不同的方法，至少可能会给你一些想法。这是创建绑定处理程序的一种方法：

ko.bindingHandlers.hideIfIrrelevant = {
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var question = ko.unwrap(valueAccessor());

        if(!question.parents()) {
           $(element).show() // Always show the question if it has no parents
           return false;
        }

        var allQuestions = bindingContext.$root.questions();
        var parents = allQuestions.filter(function (q) {
            return question.parents().indexOf(q.id()) !== -1;
        });

        var shown = false;
        $.each(parents, function(i, parent) {
            if(parent.answer() && question.activators().indexOf(parent.answer()) != -1) {
                shown = true;
                return false;
            }
        });

        if(shown) {
            $(element).show();
        }
        else {
            $(element).hide();
        }
    }
};

Here's更新的小提琴。请注意，通过使用自定义绑定，您不再需要visible属性作为数据模型的一部分。

根据父级的值显示和隐藏项目

Example jsFiddle

1 个答案: