Violín: http://jsfiddle.net/LkqTU/9399/

Código:

var ViewModel = function (first, last) {
    var self = this;
    self.showIcon = ko.observable(false);
    self.triggerIcon = function () {
        self.showIcon(true);
    };
};
$('.card-delete-button').tooltip({
    'placement': 'top',
        'title': 'Text'
});
ko.applyBindings(new ViewModel("Planet", "Earth"));

Por alguna razón, la información sobre herramientas no está visible para el ‘.tarjeta-eliminar-botón’. Creo que es debido a que el elemento de DOM no está disponible hasta que el triggerIcon función es golpeado. Pero en la aplicación, tengo que enlazar estos tooltips para un montón de diferentes elementos y prefiere hacerlo una vez, en un solo lugar, en vez de pegar el enlace en el triggerIcon función. cómo se consigue esto?

InformationsquelleAutor RobVious | 2013-06-01

3 Comentarios

  1. 59

    Su mejor apuesta en una situación como esta es para crear un enlace personalizado que puede utilizar para colocar la información de herramientas en cualquier lugar en el marcado.

    Aquí es una implementación de una descripción de unión:

    ko.bindingHandlers.tooltip = {
        init: function(element, valueAccessor) {
            var local = ko.utils.unwrapObservable(valueAccessor()),
                options = {};
    
            ko.utils.extend(options, ko.bindingHandlers.tooltip.options);
            ko.utils.extend(options, local);
    
            $(element).tooltip(options);
    
            ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
                $(element).tooltip("destroy");
            });
        },
        options: {
            placement: "right",
            trigger: "click"
        }
    };

    A continuación, utilice este enlace en su página como:

    <input data-bind="value: name, tooltip: { title: help, trigger: 'hover' }" />

    Puede establecer opciones a nivel global y, a continuación, reemplace con lo que pasa en la unión.

    Cuando usted consigue en la realización de plantillas y control de flujo de escenarios, el uso de un enlace personalizado que realmente ayuda, ya que de forma automática se inicializa (y limpiado) en el momento adecuado sin tener que manualmente saber cuándo llamar a código.

    He aquí un ejemplo: http://jsfiddle.net/rniemeyer/BF5yW/

    • opciones: { contenedor: ‘cuerpo’ } es importante para la descripción de ancho
  2. 7

    Adición a @RP Niemeyer respuesta…

    En github hay un pequeño proyecto llamado Octavos De Final De Bootstrap para hacer «rico dos interacciones con Bootstrap y Knockout de enlaces».

    A continuación es un fork de su violín que incluye a los octavos de final de Bootstrap.

    http://jsfiddle.net/qZkXP/

    <div class='liveExample' data-bind="event: {mouseover: triggerIcon}">   
        <!-- ko if: showIcon -->
        <a class="card-delete-button" 
           data-bind="tooltip: {title: 'Another tooltip', placement: 'right'}">
               <i class="icon-trash"></i>
        </a>
        <!-- /ko -->
    </div>
  3. 4

    También he tenido algunos problemas con respecto a la descripción de unión con knock-out y la respuesta ofrecida por RP Niemeyer me ayudó. Pero luego, cuando he intentado enlazar a una función que devuelve las opciones objeto de la descripción, que no se llamaba (se ha llamado una sola vez). Así que no era de trabajo si yo estaba tratando de cambiar dinámicamente el título de la descripción, basada en el mapeado de clases css. Así, la solución que he encontrado es:

    ko.bindingHandlers["tooltip"] = {
    'init': function (element, valueAccessor) {
        var local = ko.utils.unwrapObservable(valueAccessor());
        var options = {};
    
        ko.utils.extend(options, ko.bindingHandlers.tooltip.options);
        ko.utils.extend(options, local);
    
        $(element).tooltip(options);
    
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).tooltip("destroy");
        });
    },
    'update': function (element, valueAccessor) {
        var local = ko.utils.unwrapObservable(valueAccessor());
        var options = {};
    
        ko.utils.extend(options, ko.bindingHandlers.tooltip.options);
        ko.utils.extend(options, local);
    
        $(element).data("bs.tooltip").options.title = options.title;
    },
    options: {
        placement: "top",
        trigger: "click"
    }};

    Quería hacer este comentario aquí porque creo que sería útil en aquellos casos en que el título de la descripción tiene que ser cambiado de forma dinámica.

Dejar respuesta

Please enter your comment!
Please enter your name here