0

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

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

我需要手风琴小部件的标题来计算来自另一个小部件的子列表项。或者它可能会显示字数，基本上，它需要指定从其内容中计数的内容，这可能会因包含的内容类型而异。

我想简而言之，我只需要一种在父小部件和子小部件之间进行通信的方法，而无需在另一个小部件中对一个小部件进行硬编码知识，开发人员需要明确声明他们想要的计数是什么。

我尝试过但不起作用或不喜欢的事情：

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 并且它起作用了，因为它是一个被更新的绑定可观察对象。

我也可以编写 jQuery 来计算项目，但这似乎不对，考虑到它特定于 HTML 块而不是 observable 中的数据项。

$(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 文档或淘汰赛文档中的某些内容。

4

1 回答 1

0

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

<div data-bind="accordion:{headerModel:childViewModel}"></div>
<div data-bind="listItems:{itemsModel:childViewModel}"></div>
于 2013-07-13T14:25:15.417 回答