Question

我正在使用Durandaljs，我正在创建一些可重用的小部件。小工具很棒！但是，我正在尝试创建一种方法，让一个小部件获取子窗口小部件中的项目数。

例如，我有两个小部件，一个只允许页面部分可折叠的手风琴小部件，以及一个显示列表中项目的小部件。

我需要手风琴小部件的标题来计算来自另一个小部件的子列表项。或者它可能会显示单词的数量，基本上，它需要从内容中指定它的计数内容，并且根据它所包含的内容类型而有所不同。

我想简而言之，我只需要一种在父窗口小部件和子窗口小部件之间进行通信的方法，而无需对其他窗口小部件中的一个窗口小部件进行硬编码，开发人员需要明确声明他们想要计数的内容。 / p>

我尝试但不工作或不喜欢的事情：

ko.bindingHandlers.counter = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
    alert('init');
    var value = valueAccessor();
    $(element).text(bindingContext.$parent.settings.items.length);
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
    alert('update');
    var value = valueAccessor();
    $(element).text(bindingContext.$parent.settings.items.length);
}
};

上述方法不起作用，因为当我将其设置为“工作”时，它最初只能工作，更新没有显示，因为它没有观察可观察的，并且更改为

bindingContext.$parent.settings.items().length

抛出一个错误，因为在bindingContext里面它不是一个可观察的，尽管我在子窗口小部件中使用了settings.items（）。length，因为它是一个被更新的绑定observable。

我也可以编写jQuery来计算项目，但这似乎不正确，因为它将特定于HTML块而不是可观察的数据项。

$(document).on('DOMNodeInserted', '.contentWidget', function () {
    var $t = $(this);
    var count = $('.contentItem', $t).length;
    var $parent = $t.closest('[data-countable]');
    var $countEl = $parent.find($parent.attr('data-countable'));
    if ($countEl) {
        $countEl.text(count);
    }
});

最后，当然其他人正在做类似的事情而我还没有发现它，或者我错过了一个简单的方法来做到这一点，因为我在durandal docs或者淘汰文档中遗漏了一些东西。 / p>

Answer 1

我认为您最好在小部件之间共享视图模型，而不是尝试从另一个小部件访问小部件。像这样的事情

<div data-bind="accordion:{headerModel:childViewModel}"></div>
<div data-bind="listItems:{itemsModel:childViewModel}"></div>

如何从Durandal中的子窗口小部件访问项目数？

1 个答案: