将 KnockoutJS 与 JQuery 灯箱一起使用答案

【问题标题】：Using KnockoutJS with JQuery lightbox将 KnockoutJS 与 JQuery 灯箱一起使用
【发布时间】：2015-07-03 17:52:36
【问题描述】：

我正在制作一个 KnockoutJS 应用程序，应该可以在其中查看产品，单击它们时，应向用户显示所选产品的详细视图，并且应在其他产品上放置一个叠加层。

我已经设法使用 JQuery 和 Featherlight.js 完成了几乎所有这些工作。我能够使用 KnockoutJS 可观察变量填充详细视图，但我遇到的问题是，当显示详细视图（使用 JQuery）时，与 KnockoutJS 视图模型的绑定丢失了。我希望能够在详细视图中使用 KnockoutJS 收听点击事件（并在下面的代码中显示的淘汰控制器中调用函数“update()”）并根据此事件更新视图但截至目前这个只有使用 JQuery 才有可能。

我认为问题在于，当使用 Featherlight.js 打开详细视图时，会创建一个新的“上下文”或实例，而 Knockout 不再具有任何绑定。任何人都知道如何解决这个问题？

这是一个小提琴：https://jsfiddle.net/d1txamd4/8/

这是我的代码：

HTML

<div style="margin-top:2em;" class="row" data-bind="foreach: products">
                   <div class="col l4 m6 s12">
        <div class="card">
            <a href="#" data-bind="click: $parent.showProductDialog">
                <div class="card-image">
                  <img data-bind="attr:{src: image}">
                </div>
            </a>
            <div class="card-content">
              <b data-bind="text: title"></b>
            </div>
            <div class="card-action">
              <p style="float:left;"><span data-bind="text: price"></span> kr</p>
              <a style="float:right;" class="btn disabled">Föreslå</a>
            </div>
        </div>
    </div>
    </div>

<!-- This is the HTML for the lightbox -->
<div class="lightbox">
 <div class="lightbox-content">
      <img data-bind="attr:{src: lightboxImage}"></br>
      <b class="dialog-title" data-bind="text: lightboxTitle"></b>
      <p data-bind="text: lightboxDescription"></p>
 </div>
    <div class="modal-footer">
        <a data-bind="click: update" class="btn">Click me</a>
    </div>
</div>

JavaScript

function ProductCardViewModel() {
    var self = this;

    // Array containing all products
    self.products = ko.observableArray();

    self.lightboxImage = ko.observable();
    self.lightboxDescription = ko.observable();
    self.lightboxTitle = ko.observable();

   self.products = [
       {"id":1,"name":"Cool healine","title":"It's cool to have a cool headline","description":"This text is suppost to describe something","price":700,"image":"http://www.swedishevent.se/se/wp-content/uploads/2010/11/takvandring_top.jpg","categories":[1,4]},{"id":2,"name":"Even cooler headline","title":"A nice headline is the key to success ","description":"What to write, what to write, what to write?","price":500,"image":"http://www.karlliesilva.com/Massage-Therapy-white-flower2.jpg","categories":[2]}
   ];

   self.showProductDialog = function(product) {
        self.lightboxImage(product.image);
        self.lightboxDescription(product.description);
        self.lightboxTitle(product.title);
        $.featherlight('.lightbox');

   };

    <!-- I want to be able to call this function from the lightbox -->
    self.update = function() {
        alert("Success!");
    };
}

ko.applyBindings(new ProductCardViewModel());

【问题讨论】：

标签： javascript jquery knockout.js lightbox featherlight.js

【解决方案1】：

这里有两个问题。

一期

featherlight 插件似乎可以创建新的 dom 元素，然后将它们插入到 dom 中。这意味着淘汰赛不会与这些注入的元素绑定任何东西。

问题二

submit 绑定仅适用于 form 元素，请参阅knockout documentation

解决方案

解决方案是两个使用ko.applyBindings 将您的视图模型绑定到注入的 dom 元素，并将 submit 绑定更改为 click 绑定。

我已经用可行的解决方案更新了您的fiddle。

【讨论】：

【解决方案2】：

查看 1.3.0 版中引入的选项 persist。

featherlight 可以“窃取”并保留它，而不是克隆您的内容。这可能更适合您绑定代码的方式。

【讨论】：