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

Question

我在工具提示中有一个用逗号连接的数组。但是我希望每个人都在自己的行上。我尝试了一些方法，但 none 似乎有效。该代码是我也是新手的可观察到的淘汰赛。

这是我的 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（您包装 bootstrap 工具提示功能的函数）应该是视图模型上的计算可观察对象，以及图标 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 的演示。

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

How to add a break between Array objects with knockout and tooltip

javascript

arrays

ko.observablearray

knockout.js