Geek Answers Handbook

Using KnockoutJS with a jQuery shortcut

I am making a KnockoutJS application where it should be possible to view products, and when clicked on them, a detailed view of the selected product should be displayed, and the label should be placed on top of other products.

I managed to get almost all of this using jQuery and Featherlight.js. I can populate the detailed view with KnockoutJS observable variables, but the problem I am facing is that when displaying the detailed view (using jQuery), the bindings to the KnockoutJS view model are lost. I want you to be able to listen for click events with KnockoutJS (and call the "update ()" function in the knockout controller shown in the code below) in a detailed view and update the view based on this event, but for now this is only possible with using jquery.

I think the problem is that when you open a detailed view using Featherlight.js, a new “context” or instance is created in which Knockout no longer has bindings. Does anyone know how to fix this?

Here is the fiddle: https://jsfiddle.net/d1txamd4/8/

Here is my code:

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 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());
+4
source share
2 answers

There are two problems here.

Problem 1

The featherlight plugin apparently creates new dom elements and then inserts them into dom. This means that the knockout will not have anything to do with these input elements.

Problem 2

Submit binding only works on form elements, see documentation.

Decision

: ko.applyBindings dom .

fiddle .

+3

persist, 1.3.0.

, featherlight "" . , .

0

More articles:


All Articles