Question

我在工具提示中加入了逗号数组。但是我希望每个人都有自己的路线。我尝试过一些东西，但似乎都没有。代码是一个可以观察的淘汰赛，我也是新人。

这是我的ko observable：

 this.campaignTagString = ko.observable("");
(function() {
    if(data.campaignTags != undefined) {
        var array = [];
        for(var tag in data.campaignTags){
            array.push(data.campaignTags[tag].name);
        }
        //Join our campaign tag name array
        var tagString = array.join(", " + '<br />');
        $('#tooltip-campaigntags').tooltip({ 
          content: function(callback) { 
             callback($(this).prop('title').replace('|', '<br />')); 
          }
        });
        var textCampaign = "Campaigns: ";
        o.campaignTagString(textCampaign + tagString);
    }
})();

我这样称呼它：

<span id="tooltip-campaigntags" class="label label-default label-mini" data-bind="html: '<i class=\'fa fa-tags\'></i> '+campaignTags().length, tooltip: { title: campaignTagString , placement: 'bottom' }" data-toggle="tooltip" data-placement="bottom" title="" >
</span>

任何帮助都会很棒，谢谢！

Answer 1

一些提示：

您的代码中有错误：如果campaignTags是对象，则campaignTags().length将无效;如果它是一个数组，data.campaignTags[tag].name将不起作用。
您可能会发现查看Knockout-Bootstrap很有用，这是一个Bootstrap改编版，它为Bootstrap JS函数提供了Knockout bindingHandlers（在下面的演示中使用）。
如果您希望不将内容编码为文本，则Bootstrap文档会提及选项{html: true}。
此外，您的IIFE（包装引导工具提示功能的函数）应该是您的视图模型上的计算可观察对象，以及图标html和字符串，所有这些都取决于campaignTags。

如果您遵循以下提示，以下是生成的JS viewModel和HTML绑定：

//params === object containing tag objects like -- tagX: {name: 'tag'}
function VM(params) { 
    var self = this;
    this.campaignTags = params;
    this.campaignTagsArray = ko.computed(function() {
        var array = [];
        for(var tag in self.campaignTags) {
            array.push(self.campaignTags[tag].name);} 
        return array;});
    this.campaignTagString = ko.computed(function() { 
        return "Campaigns: <br>" + 
               self.campaignTagsArray().join(", " + '<br />'); });
    this.html = ko.computed(function() { 
        return '<i class="fa fa-tags"></i>&nbsp; ' + 
               self.campaignTagsArray().length });
}

HTML绑定：

<span class="label label-default label-mini" data-bind="
     html: html(), 
     tooltip: { html: true, title: campaignTagString() , placement: 'bottom'}">
</span>

查看fiddle进行演示。

如何使用knockout和工具提示在Array对象之间添加中断

1 个答案: