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

它几乎完美无缺。

现在的问题是我想在上面添加关闭按钮酥料饼。我不行。我还尝试使用额外的JS函数：

$（document）.on（'click'，“button.close.pull-right”，function（）{ $（ “酥料饼。”）隐藏（）。 }）;

但在关闭弹出窗口再次看到它之后我必须点击两次。当用户在其外部点击时，是否可以删除弹出窗口？

2.如果我点击另一个popover，第一个是收盘。通过这种方式，总是只能看到一个。它几乎正常工作但在关闭第一个之后我必须点击两次才能看到它。

3.最后一件事是删除项目按钮。这对我来说再次起作用。如果删除按钮位于弹出窗口之外，那么我使用：

$ parent.removeItem

它正在运作

我已经在以下Fiddler上添加了这些更改：http://jsfiddle.net/f2swC/1/ 这是我工作的例子的副本

任何想法如何解决我的问题？

Answer 1

对于1.＆amp;我已经写了一个解决方案。它可以在这里找到：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中删除项目的方法。

问题是我现在不知道如何从Popover HTML调用$ parent？

淘汰Twitter Bootstrap双弹出，删除项目和关闭弹出窗口

1 个答案: