Question

我正在尝试使用Foundation初始化下拉窗口小部件。下拉列表的实际html是动态编译的，页面上存在多个下拉列表。由于其动态特性，我无法初始化下拉菜单。

基本上我的问题是，如何在没有ID或数据下拉属性的情况下初始化Foundation下拉列表？

我的屏幕左侧是数据“人物”列表，右侧是单个人的详细信息。整个屏幕使用Knockout将数据绑定到视图模型。

我的主要View模型：

self.people = ko.observableArray([]); 
self.selectedPerson = ko.observable()

在我的HTML中：

<div data-bind='with: selectedPerson'>
    ...
    <div class='my-dropdown-widget' data-bind="myCustomBinding: {data: myData}">
          ...
    </div>
</div>

每个selectedPerson都是一个Person对象，它有一个onReady函数，当来自此人的数据在主视图模型中呈现时，该函数将触发。在该函数中，我有以下代码：

self.onReady = function (el) {
    var filterEl = $('.filter-widget', el).attr({
        'id': self.filterWidget.ui_ID,
        'data-dropdown': ''
    });

    setTimeout(function () {
        $(el).foundation();
    }, 500);

    self.ui_container = $(el);
};

我必须在页面上有下拉窗口小部件（而不是为它加载HTML），所以我可以对它应用绑定。在动态加载的html上应用Binding会混淆widget的绑定上下文。

此方法失败，并显示以下消息：

未捕获的TypeError：无法读取未定义的属性“className”

通常会发生此错误，因为该元素没有data-dropdown属性，我将动态添加该属性。

如果我按照Foundation文档中说明的方式执行此操作，并在下拉列表元素中添加ID和data-dropdown属性，则下拉列表有效，但仅适用于第一个{{1} }。换句话说，如果我导航到多个人，则下拉列表将停止正常工作。

如果设置了我的页面，我怎样才能让这些下拉列表工作？

使用Knockout CustomBinding初始化多个基础知识下拉列表

0 个答案: