Javascript 将KnockoutJS与JQuery lightbox一起使用

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

我使用JQuery和Featherlight.js成功地实现了几乎所有这些功能。我能够用KnockoutJS可观察变量填充详细视图，但我遇到的问题是，当显示详细视图（使用JQuery）时，与KnockoutJS视图模型的绑定丢失。我希望能够在详细视图中使用KnockoutJS（并在下面的代码中所示的knockout控制器中调用函数“update（）”）来侦听click事件，并基于此事件更新视图，但到目前为止，这只能通过使用JQuery实现

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

这是一把小提琴：

这是我的密码：

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>

kr

Föreslå



点击我

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

函数ProductCardViewModel（）{
var self=这个；
//包含所有产品的数组
self.products=ko.observearray（）；
self.lightboxImage=ko.observable（）；
self.lightboxDescription=ko.observable（）；
self.lightboxTitle=ko.observable（）；
自助产品=[
{“id”：1，“name”：“Cool healine”，“title”：“有一个很酷的标题很酷”，“description”：“这篇文章是用来描述某事的支撑”，“price”：700，“image”：”http://www.swedishevent.se/se/wp-content/uploads/2010/11/takvandring_top.jpg“，”类别“：[1,4]}，{“id”：2，“name”：“更酷的标题”，“标题”：“好的标题是成功的关键”，“描述”：“写什么，写什么，写什么？”，“价格”：500，“图片”：http://www.karlliesilva.com/Massage-Therapy-white-flower2.jpg“，“类别”：[2]}
];
self.showProductDialog=功能（产品）{
self.lightboxImage（product.image）；
self.lightboxDescription（产品描述）；
self.lightboxTitle（产品名称）；
$.featherlight（“.lightbox”）；
};
self.update=函数（）{
警惕（“成功！”）；
};
}
应用绑定（新产品CardViewModel（））；

这里有两个问题

第一期

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

第二期

提交绑定仅在表单元素内有效，请参阅

解决方案

解决方案是两次使用

ko.applyBindings

将视图模型绑定到注入的dom元素，并将提交绑定更改为单击绑定

---

我已经用一个有效的解决方案更新了您的解决方案。

查看1.3.0版中引入的

persist

选项

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