Knockout Twitter Bootstrap雙popover，刪除項目和關閉popover

Question

我是新的KnockOut，現在我很努力地想做一件事，但沒有成功。 我有多個foreach。對於 最終的項目我想說明酥料餅的時候就可以了用戶點擊， 致謝this post

//Bind Twitter Popover 
ko.bindingHandlers.popover = { 

init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
    var tmplId = ko.utils.unwrapObservable(valueAccessor()); 
    var tmplHtml = $('#' + tmplId).html(); 
    var uuid = guid(); 
    var domId = "ko-bs-popover-" + uuid; 
    var tmplDom = $('<div/>', { 
     "class": "ko-popover", 
     "id": domId, 
     "data-bind": "withProperties: { label: '" + viewModel.label() + "', required: '" + viewModel.required() + "' }" 
    }).html(tmplHtml); 

    options = { 
     content: tmplDom[0].outerHTML 
    }; 

    // Need to copy this, otherwise all the popups end up with the value of the last item 
    var popoverOptions = $.extend({}, ko.bindingHandlers.popover.options); 
    popoverOptions.content = options.content; 

    console.log($(element)); 
    console.log(element); 

    $(element).bind('click', function() { 
     $('.popover').hide();    
     $(this).popover(popoverOptions).popover('toggle'); 
     // If you apply this when the popup isn't visible, I think that it tries to bind to thewhole pageand throws an error 
     if($('#' + domId).is(':visible')) 
     { 
      ko.applyBindings(viewModel, $('#' + domId)[0]); 
     } 
    }); 

}, 
options: { 
    placement: "right", 
    title: "", 
    html: true, 
    content: "", 
    trigger: "manual" 
} }; 

它的工作幾乎是完美的。

1. 現在的問題是，我想添加關閉按鈕上的 彈出。我不工作。我也嘗試用另外的JS功能：

的$（document）。在（ '點擊'， 「button.close.pull右」，函數（）{$ （ 「酥料餅的。」） .hide（）; }）;

但關閉popover後再次看到它，我必須點擊兩次。當用戶點擊它之外時是否可以刪除彈出窗口？

2.And如果我點擊其他酥料餅的第一個是 收盤。這樣總是隻能看到一個。它幾乎工作，但在關閉第一個後，我必須點擊兩次才能看到它。

3.最後一項是刪除項目按鈕。對我而言，這又不起作用。如果刪除按鈕是酥料餅之外，那麼我用：

$ parent.removeItem

，它的工作

我已經添加此變化對以下提琴手：http://jsfiddle.net/f2swC/1/ 這是一個我正在工作的示例副本

任何想法如何解決我的問題？

Answer 1

對於1 & 2.我已經編寫了一個解決方案。可在這裏 它`：http://jsfiddle.net/f2swC/9/

>   <div data-bind="foreach: items"> 
>    <span data-bind="text: label"></span> 
>    <input type="checkbox" data-bind="checked: required" /> 
>    <button data-bind="popover: 'settingsPopover'">settings</button> 
>    <br /> 
>   </div> 
>   <script type="text/html" id="settingsPopover"> 
>    <h4> <span class="icon-cog"> &nbsp; </span> Attributes</h4> 
> <label> Label </label> 
>    <input type="text" data-bind="value: label, valueUpdate:'afterkeydown'" /> ><label class = "checkbox" > 
><input type="checkbox" data-bind="checked: required" /> 
>Required 
></label> 
></br> 
><a class="deleteItem" href="#" data-bind="click: >$root.removeItem">Delete</a> 
></br> 
><button class="close pull-right" type="button" data-dismiss="popover">close</button> 

和JS

> function s4() { 
>  return Math.floor((1 + Math.random()) * 0x10000) 
>   .toString(16) 
>   .substring(1); }; 
> 
> function guid() { 
>  return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4(); } 
> 
> ko.bindingHandlers.withProperties = { 
>  init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
>   // Make a modified binding context, with a extra properties, and apply it to descendant elements 
>   var newProperties = valueAccessor(), 
>    innerBindingContext = bindingContext.extend(newProperties); 
>   ko.applyBindingsToDescendants(innerBindingContext, element); 
> 
>   // Also tell KO *not* to bind the descendants itself, otherwise they will be bound twice 
>   return { controlsDescendantBindings: true }; 
>  } }; 
> 
> // Bind Twitter Popover ko.bindingHandlers.popover = { 
>  init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
>   var tmplId = ko.utils.unwrapObservable(valueAccessor()); 
>   var tmplHtml = $('#' + tmplId).html(); 
>   var uuid = guid(); 
>   var domId = "ko-bs-popover-" + uuid; 
>   var tmplDom = $('<div/>', { 
>    "class": "ko-popover", 
>    "id": domId, 
>    "data-bind": "withProperties: { label: '" + viewModel.label() + "', required: '" + viewModel.required() + "' }" 
>   }).html(tmplHtml); 
> 
>   options = { 
>    content: tmplDom[0].outerHTML 
>   }; 
> 
>   // Need to copy this, otherwise all the popups end up with the value of the last >item 
>   var popoverOptions = $.extend({}, ko.bindingHandlers.popover.options); 
>   popoverOptions.content = options.content; 
> 
>   $(element).bind('click', function() { 
>    $('.popover.fade.right.in').hide(); 
>    $(this).popover(popoverOptions).popover('show'); 
>    // If you apply this when the popup isn't visible, I think that it tries to >bind to thewhole pageand throws an error 
>    if($('#' + domId).is(':visible')) 
>    { 
>     ko.applyBindings(viewModel, $('#' + domId)[0]); 
>    } 
>   }); 
>   
>  }, 
>  options: { 
>   placement: "right", 
>   title: "", 
>   html: true, 
>   content: "", 
>   trigger: "manual" 
>  } }; 
> 
> $('html').on('click', '[data-dismiss="popover"]', function (e) { 
>  $('.popover.fade.right.in').hide(); }); 
> 
> 
> var ItemModel = function (data) { 
>  var self = this; 
>  self.label = ko.observable(data.label); 
>  self.required = ko.observable(data.required); } 
> 
> var ViewModel = function() { 
>  var self = this; 
>  self.initItems = [{ 
>   "label": "Item 1", 
>   "required": false 
>  }, { 
>   "label": "Item 2", 
>   "required": true 
>  }, { 
>   "label": "Item 3", 
>   "required": false 
>  }, { 
>   "label": "Item 4", 
>   "required": true 
>  }, ]; 
> 
>  self.items = ko.observableArray(ko.utils.arrayMap(self.initItems, function (item) { 
>   return new ItemModel(item); 
>  })); 
>      
>  self.removeItem = function(task) { 
>    self.calendarItemArray.destroy(task) 
>   }; 
> 
> }; 
> 
> $(function() { 
>  var vm = new ViewModel(); 
>  ko.applyBindings(vm); }); 

但我真的還在尋找一種方法來酥料餅刪除項目。

問題是我現在沒有如何從Popover HTML調用$ parent？