녹아웃과 툴팁이있는 Array 객체간에 나누기를 추가하는 방법

Question

배열을 쉼표로 툴팁에 결합했습니다. 그러나 나는 각자가 그것의 자신의 선에 있기 바란다. 나는 몇 가지 시도를했지만 아무도 작동하지 않는 것 같습니다. 이 코드는 내가 새로 나온 관중이다.

은 여기 내 코가 관측 : 내가 지금처럼 호출 오전

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이 작동하지 않습니다.
• 아래의 데모에서 사용 된 Bootstrap JS 함수 용 Knockout bindingHandlers를 제공하는 부트 스트랩 적용 Knockout-Bootstrap을 살펴 보는 것이 유용 할 수 있습니다.
• 부트 스트랩 문서에는 내용을 텍스트로 인코딩하지 않으려면 {html: true} 옵션이 나와 있습니다.
• 또한 IIFE (부트 스트랩 툴팁 기능을 래핑 한 함수)는 아이콘 html과 문자열 (모두 campaignTags)에 따라 뷰 모델에서 계산 된 관찰 가능이어야합니다.

다음은 당신이이 끝을 따르는 경우에 그 결과 JS 뷰 모델 및 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.