将点击绑定添加到Durandal/knockout中的现有视图/视图模型 [英] Adding click binding to existing view/viewmodel in Durandal/knockout

问题描述

我正在使用一个第三方图表工具生成一个图例，在该图例中，我使标签可点击.它使用回调函数来生成标签

I'm using a third party charting tool that generates a legend and in that legend I'm making the labels clickable. It uses a callback function to generate the label

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

显然，由于用户采取了一些动作，因此在绑定后激活了上面的labelFormatter函数，因此锚链接上的链接绑定没有生效，并且单击时没有任何反应.

Obviously as the above labelFormatter function is activated after binding as a result of actions the user takes, the link binding on the anchor link is not live and nothing happens when clicked.

多次调用labelFormatter函数，因为图例中有5个标签.我是否必须以某种方式在每次执行函数时执行applyBindings(...调用?

The labelFormatter function is called multiple times as there are 5 labels in the legend. Do I have to do an applyBindings(... call on each execution of my function somehow?

我要做的就是获取链接以激活一个函数，在该函数中，我将基本上加载新图表，并且所加载的图表/数据取决于单击的5个标签中的哪个.该图表由第三方jQuery插件(Flot)生成，在用户激活我的视图上的某些功能之前，该插件在dom中不存在.

All I'm trying to do is get the link to activate a function in which I'll load a new chart basically and the chart/data loaded depends on which of the 5 labels is clicked. The chart is generated by a 3rd party jquery plugin (flot) which does not exist in the dom until the user activates certain functions on my view.

好的，很有趣，感谢您向我介绍有关委托事件的信息.我不确定我是否在原始帖子中完全解释了自己. seriesIndex是全局变量，最初设置为0.

OK, interesting and thanks for educating me about delegated events. I'm not sure I explained myself entirely in the original post. seriesIndex is a global variable, set to 0 initially.

创建图表后，插件(填充)会基于一组数据创建图表，并且具有可自定义的功能(我将其称为"legendLabelFormatter")，该功能可用于格式化标签.只是将标签设置为<class='label' href='#'>会导致标签为空，所以我使用了:

When the chart is created, the plugin (flot) creates the chart based on a set of data and it has a customizable function (which I've called "legendLabelFormatter") which allows me to format the label. Just setting the label to <class='label' href='#'> will result in an empty label, so I've used:

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

...因为这会导致可点击的标签.

...as this results in a clickable label.

在附加"事件中，我有:

In my "attached" event I have:

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

我不确定您要通过在事件处理程序中增加seriesIndex来实现什么?只是为了让我确定单击了哪个标签. Flot将调用LegendLabelFormatter函数五次-有5组数据要绘制). seriesIndex只是我设置的局部全局变量，与图表中使用的视图模型或数据集无关.

I'm not sure what you were trying to achieve with incrementing seriesIndex in the event handler? It's only there to allow me to identify which label has been clicked. Flot will call the legendLabelFormatter function five times - there are 5 sets of data to be plotted). seriesIndex is only a local global variable I've set up, it's nothing to do with the viewmodel or dataset used in the chart.

因此，this.seriesIndex根本就不存在，因为this在附加函数中引用的点仅会是单击的链接，确定吗?我曾尝试在链接中添加"seriesIndex"作为属性，但是当我点击该功能时，当我检查this对象时，它仍然没有显示，所以我还不太清楚.

Therefore this.seriesIndex simply doesn't exist as this at the point referenced in the attached function is only going to be the clicked link, surely? I tried adding "seriesIndex" as a property in the link, but it still doesn't show when I inspect the this object when the function is hit, so I've not quite got this right yet.

鉴于埃里克·泰勒(Eric Taylor)的回答很有帮助，而且几乎可以解决.在这个问题上发生的任何像我这样昏暗的人都可能对此感到困惑，因此出于完整性考虑:

Whereas Eric Taylor's answer was helpful and almost there. Anyone as dim as me happening on this question may be stumped by it, so for completeness:

jQuery图表插件将其作为标签格式化例程的一部分调用此函数(在我的情况下，此函数执行了5次，因为我有5个要在图表上显示的数据)

The jquery chart plugin calls this function as part of its label formatting routine (and does so 5 times in my case as I have 5 lots of data to show on the chart)

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

在附加的" durandal事件处理程序中，我有这个:(毕竟我的"seriesIndex"属性在那里，只是隐藏在属性中)

In the "attached" durandal event handler I have this: (my "seriesIndex" property was there after all, just hidden in the attributes)

var attached = function (view) {

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

这会成功地单击标签的索引，从而成功调用我的追溯"函数，因此我可以使用它在该函数中加载正确的数据数组.

This successfully calls my "drilldown" function with the index of the label clicked so I can use that to load the correct data array in that function.

推荐答案

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

You're not going to be able to dynamically add a data-bind. But, then, you don't need to.

这是委托事件的理想候选人.在此处.

This is an ideal candidate for delegated events. Take a look at the Knockout documentation here.

将linkHTML更改为以下内容:

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

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

In the attached handler of your viewModel that Durandal provides, you would have:

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

或类似的东西.

表达上述观点的一种更好的方法是:

A better way to express the above is this:

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

我更喜欢后者，因为它利用了附加处理程序上可用的视图":

I prefer the latter as it leverages "view" available on the attached handler:

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

委托方法的好处是，您可以动态添加标签，并且由于事件是附加到tag.class的，因此jQuery会根据事件来选择新标签.

What's nice about the delegated approach is that you can dynamically add your labels, and since the event is attached to a tag.class, jQuery will pick up the new label in terms of events.

这篇关于将点击绑定添加到Durandal/knockout中的现有视图/视图模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！