ノックアウトデータバインドリストのブートストラップポップオーバー

Question

ノックアウトとブートストラップポップオーバーを数日間使っていて、ノックアウトデータバインドを使っていくつかの情報を表示するデータテーブルがあります。

<tbody data-bind="foreach: tehlist()"> 
    <tr> 
    <td data-bind="text: $data.Category"></td> 
    <td data-bind="text: $data.Name"></td> 
    <td><button type="button" id="tehValue" class="btn btn-default" data-bind="text: $data.Value" style="border:none" onclick="getinfo()"></button></td> 
    </tr> 
</tbody> 

とtehValueがクリックされたときに、それはランダムなメッセージを表示する機能を起動：

function getinfo(veh, item) { 
    $('#tehValue').popover({ 
     content: 'Dana' + Math.random(), 
     html: true 
    }); 
} 

問題は、それが最初にクリックされた値のためではなく、他人のためだけのポップアップが表示されることです。

valueのデータバインドごとに異なるポップアップを表示する方法はありますかtehlist？私はまだクリックするだけで、最初の値のためのポップオーバーを取得しています

getinfo = function (item, event) { 
     $('#tehValue').popover({ 
      content: 'Dana' + Math.random(), 
      html: true 
     }); 
    } 

：に

<button type="button" id="tehValue" class="btn btn-default" data-bind="text: $data.Value, click: getinfo" style="border:none"></button></td> 

と機能：私が変更した

UPDATE

。

idを使用せずにボタンのポップオーバーを表示する方法はありますか？getinfo関数を使用してonclickだけを使用しますか？

Answer 1

ここに、以下の解決策があります。 http://jsfiddle.net/bdellinger/LkqTU/32342/

あなたのポップオーバーのカスタムバインドを作成するのはどうですか？

ko.bindingHandlers.popover = { 
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
    ko.bindingHandlers.value.init(element, valueAccessor, allBindings); 
    var source = allBindings.get('popoverTitle'); 
    var sourceUnwrapped = ko.unwrap(source); 
    $(element).popover({ 
     trigger: 'focus', 
     content: valueAccessor(), 
     title: sourceUnwrapped 
    }); 
    }, 
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
    var value = valueAccessor(); 
    ko.bindingHandlers.value.update(element, valueAccessor); 
    } 
}; 

とあなたの関数KOはそれが渡された計算になります。

this.getInfo = ko.computed(function() { 
    return this.name() + " " + Math.random() 
    }, this); 

、このようなHTMLでそれを呼び出します。

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" data-bind="popover: getInfo, popoverTitle: category">?</button> 

以下はすべての解決策です。上記のフィドルリンクをクリックしてください。

javascript。

ko.bindingHandlers.popover = { 
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
    ko.bindingHandlers.value.init(element, valueAccessor, allBindings); 
    var source = allBindings.get('popoverTitle'); 
    var sourceUnwrapped = ko.unwrap(source); 
    $(element).popover({ 
     trigger: 'focus', 
     content: valueAccessor(), 
     title: sourceUnwrapped 
    }); 
    }, 
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
    var value = valueAccessor(); 
    ko.bindingHandlers.value.update(element, valueAccessor); 
    } 
}; 


function teh(category, name) { 
    var self = this; 
    this.category = ko.observable(category); 
    this.name = ko.observable(name); 
    this.getInfo = ko.computed(function() { 
    return this.name() + " " + Math.random() 
    }, this); 
} 

function model() { 
    var self = this; 
    this.tehlist = ko.observableArray(''); 

} 

var mymodel = new model(); 

$(document).ready(function() { 
    ko.applyBindings(mymodel); 
    mymodel.tehlist.push(new teh('car', 'honda')); 
    mymodel.tehlist.push(new teh('dog', 'pug')); 
    mymodel.tehlist.push(new teh('language', 'spanish')); 
    mymodel.tehlist.push(new teh('pc', 'dell')); 

}); 

HTML

<table class="table table-striped"> 
    <thead> 
    <tr> 
     <th>Category</th> 
     <th>Name</th> 
     <th>Get Info</th> 
    </tr> 
    </thead> 
    <tbody data-bind="foreach: tehlist"> 
    <tr> 
     <td> 
     <label data-bind="text:category" </td> 
      <td> 
      <label data-bind="text:name" </td> 
       <td> 
       <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" data-bind="popover: getInfo, popoverTitle: category">?</button> 
       </td> 
    </tr> 
    </tbody> 
</table> 

<div>