Chú giải công cụ Bootstrap không hoạt động với các ràng buộc loại trực tiếp? (W fiddle)

Question

Fiddle: http://jsfiddle.net/LkqTU/9399/

Code:

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")); 

Đối với một số lý do các tooltip không hiển thị cho 'nút .card-xóa-'. Tôi nghĩ rằng đó là vì phần tử DOM đó không có sẵn cho đến khi hàm triggerIcon được nhấn. Nhưng trong ứng dụng, tôi phải liên kết các chú giải công cụ này với rất nhiều phần tử khác nhau và muốn làm điều đó một lần, ở một nơi, thay vì gắn kết ràng buộc vào hàm triggerIcon. Làm thế nào điều này có thể đạt được?

Answer 1

Đặt cược tốt nhất của bạn trong tình huống như thế này là tạo một ràng buộc tùy chỉnh mà bạn có thể sử dụng để đặt chú giải công cụ ở bất kỳ đâu trong đánh dấu.

Dưới đây là một thi hành một tooltip ràng buộc:

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" 
    } 
}; 

Sau đó, bạn dùng chương trình này bắt buộc đối với trang của bạn như:

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

Bạn có thể thiết lập tùy chọn trên toàn thế giới và sau đó ghi đè lên chúng với bất cứ điều gì bạn đi vào ràng buộc.

Khi bạn tham gia vào các kịch bản lệnh và kiểm soát luồng, sử dụng liên kết tùy chỉnh thực sự hữu ích, vì nó sẽ tự động được khởi tạo (và dọn dẹp) vào đúng thời điểm mà không cần phải biết thủ công khi nào cần gọi mã.

Đây là một mẫu: http://jsfiddle.net/rniemeyer/BF5yW/

Answer 2

Phụ Lục để @RP câu trả lời Niemeyer của ...

On github có một dự án nhỏ được gọi là Knockout-Bootstrap để làm "hai tương tác cách phong phú với Bootstrap và Knockout bindings".

Dưới đây là một ngã ba của fiddle của bạn bao gồm Knockout-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> 

Answer 3

Tôi cũng gặp phải một số vấn đề liên quan đến các tooltip ràng buộc với loại trực tiếp và câu trả lời được cung cấp bởi RP Niemeyer đã giúp tôi. Nhưng sau đó, khi tôi cố gắng liên kết với một hàm trả về đối tượng tùy chọn của chú giải công cụ, điều đó không được gọi (nó đã được gọi chỉ một lần). Vì vậy, nó không hoạt động nếu tôi đang cố gắng tự động thay đổi tiêu đề của chú giải công cụ, dựa trên các lớp css được ánh xạ. Vì vậy, giải pháp tôi tìm thấy là:

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" 
}}; 

Tôi muốn đưa ra nhận xét này ở đây vì tôi nghĩ rằng nó sẽ hữu ích trong những trường hợp khi tiêu đề của chú giải công cụ phải được thay đổi động.