Question

我正在制作一个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());

Answer 1

这里有两个问题。

发布一个

featherlight 插件似乎会创建新的dom元素，然后将它们插入到dom中。这意味着淘汰赛不会对这些注入的元素产生任何影响。

发布二期

提交绑定仅适用于表单元素，请参阅knockout documentation

解决方案

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

我已使用有效的解决方案更新了您的fiddle。

Answer 2

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

而不是克隆你的内容，羽毛灯可以反而“窃取”它并坚持下去。这可能更适合您绑定代码的方式。

将KnockoutJS与JQuery灯箱一起使用

2 个答案: