Question

我正在使用生成图例的第三方图表工具，在该图例中，我正在制作可点击的标签。它使用回调函数生成标签

function legendLabelFormatter(label, series) {
    var linkHTML = '<a href="#" data-bind="click: drillDown(' + seriesIndex + '), clickBubble: false;">' + label + '</a>';
    seriesIndex += 1;
    return linkHTML;
}

显然，由于上述labelFormatter函数在绑定后由于用户采取的操作而被激活，因此锚点链接上的链接绑定不是实时的，单击时没有任何反应。

由于图例中有5个标签，因此多次调用labelFormatter函数。我是否必须以某种方式对我的函数的每次执行进行applyBindings(...调用？

我所要做的就是获取链接以激活一个功能，我将基本上加载一个新图表，加载的图表/数据取决于点击的5个标签中的哪一个。该图表由第三方jquery插件（flot）生成，在用户激活我视图中的某些功能之前，该插件在dom中不存在。

编辑1：

好的，有趣的，感谢教育我关于委派的事件。我不确定我是否在原帖中完全解释了自己。 seriesIndex是一个全局变量，最初设置为0。

创建图表时，插件（flot）会根据一组数据创建图表，并且它具有可自定义的功能（我称之为“legendLabelFormatter”），它允许我格式化标签。只需将标签设置为<class='label' href='#'>即可生成空标签，因此我使用了：

var linkHTML = '<a href="#" class="legendLabel" seriesIndex="' + seriesIndex + '">' + label + '</a>';

...因为这会产生可点击的标签。

在我的“附加”活动中，我有：

    $(view).on('click', 'a.legendLabel', function (e) {
        this.drillDown(this.seriesIndex);
    });

我不确定你在事件处理程序中递增seriesIndex时想要实现的目标是什么？它只是允许我识别哪个标签被点击了。 Flot将调用legendLabelFormatter函数五次 - 有5组数据要绘制。 seriesIndex只是我设置的局部全局变量，它与图表中使用的视图模型或数据集无关。

因此，this.seriesIndex根本不存在，因为this在附加函数中引用的点只会是被点击的链接，当然？我尝试在链接中添加“seriesIndex”作为属性，但是当我在命中函数时检查this对象时它仍然没有显示，所以我还没有完全正确。

编辑2（并回答）

而Eric Taylor的答案很有帮助，而且几乎就在那里。任何像我这样昏暗的人都可能会被这个问题困扰，所以为了完整性：

jquery图表插件将此函数作为其标签格式化例程的一部分进行调用（在我的情况下这样做了5次，因为我有5个数据要在图表上显示）

function legendLabelFormatter(label, series) {
    var linkHTML = '<a href="#" class="legendLabel" seriesIndex="' + seriesIndex + '">' + label + '</a>';
    seriesIndex += 1;
    return linkHTML;
}

在“附加”的durandal事件处理程序中，我有:(我的“seriesIndex”属性毕竟存在，只是隐藏在属性中）

var attached = function (view) {

    $(view).on('click', 'a.legendLabel', function (e) {
        drillDown(this.attributes.seriesindex.value);
        return false;
    });
};

这成功调用了我的“drilldown”函数，并点击了标签的索引，因此我可以使用它来在该函数中加载正确的数据数组。

Answer 1

您无法动态添加数据绑定。但是，那么，你不需要。

这是委派活动的理想候选人。请查看Knockout文档here。

将您的linkHTML更改为以下内容：

var linkHTML = '<class='label' href='#'>'

在Durandal提供的viewModel的attached处理程序中，您将拥有：

$(".label").click(function () {
    this.drillDown(this.seriesIndex);
    seriesIndex++;
});

或者那种效果。

表达上述内容的更好方法是：

$(view).on('click', 'a.label', function (e) {
    this.drillDown(this.seriesIndex);
    seriesIndex++;
});

我更喜欢后者，因为它利用附加处理程序上提供的“视图”：

attached = function(view) {
    $(view).on('click', 'a.label', function (e) {
        this.drillDown(this.seriesIndex);
        seriesIndex++;
    });
}

委派方法的好处在于您可以动态添加标签，并且由于事件附加到tag.class，jQuery将根据事件选择新标签。

将点击绑定添加到Durandal / knockout中的现有视图/ viewmodel

编辑1：

编辑2（并回答）

1 个答案: