title: Calling Knockout.js viewModel function from JQuery onclick
body: <p>Pretty new to knockout.js, I'm a C#'er but my new job involves a LOT more front end in addition to back-end so finally got round to this.</p>
  
  <p>Anyway, I've encountered (what I think is) an unusual scenario where I want to call a viewModel method from a click event in JQuery; Perhaps this IS common but I can't quite figure it out:: Hoping someone can help!</p>
  
  <p>I have a simple function in my viewModel file:
      <code>//add to playlist</code><br/>
       <code>self.addToPlaylist = function (video) {</code><br/>
       <code>self.addedVideos.push(video);</code><br/>
       <code>};</code></p>
  
  <p>I'm using a Jquery library called fancybox to load a number of images into a carousel so I have  bound to my observableArray called videos</p>
  
  <pre><code>&lt;div id="carousel" data-bind="foreach: videos"&gt;
               &lt;!-- Left and right buttons --&gt;
              &lt;input id="left-button" type="button" value="" /&gt;
              &lt;input id="right-button" type="button" value="" /&gt;
                  &lt;!-- All images with class of "cloudcarousel" will be turned into carousel items --&gt;
                  &lt;!-- You can place links around these images --&gt;
                  &lt;a class="fancybox-iframe" href="#" rel="group"&gt;
                      &lt;img class="cloudcarousel" width="160" height="121" alt="test" data-bind="attr: {src: videoThumbnail, url: videoUrl, id: videoId, title: videoTitle, caption: videoCaption}"
                          onclick="previewVideo($(this).attr('url'), $(this).attr('caption'));CreateAddVideoClipButton($(this).attr('id'));" /&gt;                     
                  &lt;/a&gt;
              &lt;/div&gt;    
  </code></pre>
  
  <p>This is the full html for this div. Ideally I would have click: $parent.addToVideos within the data-bind attributes on the  but because the click I'm listening for doesn't happen at this stage I have to render an add button.
  The idea being that the click opens up the preview in fancybox and then the user can close the window, or click add to add this video to the array.</p>
  
  <p>Ok, hopefully that makes sense to people...</p>
  
  <p>In my Jquery method CreateAddVideoClipButton, I have:</p>
  
  <pre><code>var userModel = new VideosViewModel();
  var text = "&lt;a href='#' data-bind='click: userModel.addToPlaylist'&gt;Add Video&lt;/a&gt;";
  </code></pre>
  
  <p>and this is where I'm stuck.
  I need to know how to allow the click at this stage, call the addToPlaylist method in my viewModel</p>
  
  <p>If you need any more info for this to make sense please let me know.</p>
  
  <hr>
  
  <h2>EDIT: POSTED CODE</h2>
  
  <p>ViewModel:</p>
  
  <pre><code>function VideosViewModel() {
      var self = this;
  
      //Array of videos
      self.videos = ko.observableArray([
          { videoTitle: "Video Title",
          videoId: "1",
          videoThumbnail: "images/image.png",
          videoAlt: "Alt text",
          videoUrl: "videos/video.mp4",
          videoCaption: 'video caption text' },
  
      ]);
  
      //Array of added videos
      self.addedVideos = ko.observableArray([]);
  
      //add to playlist
      self.addToPlaylist = function (video) {
          self.addedVideos.push(video);
          alert("Added to playlist");
      };
  
      //remove from playlist
      self.removeFromPlaylist = function (video) {
          self.addedVideos.remove(video);
      };
  }
  ko.applyBindings(new VideosViewModel());
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="carousel" data-bind="foreach: videos"&gt;
               &lt;!-- Left and right buttons --&gt;
              &lt;input id="left-button" type="button" value="" /&gt;
              &lt;input id="right-button" type="button" value="" /&gt;
                  &lt;!-- All images with class of "cloudcarousel" will be turned into carousel items --&gt;
                  &lt;!-- You can place links around these images --&gt;
                  &lt;a class="fancybox-iframe" href="#" rel="group"&gt;
                      &lt;img class="cloudcarousel" width="160" height="121" alt="test" data-bind="attr: {src: videoThumbnail, url: videoUrl, id: videoId, title: videoTitle, caption: videoCaption}",
                          onclick="previewVideo($(this).attr('url'), $(this).attr('caption'));CreateAddVideoClipButton($(this).attr('id'));" /&gt;                     
                  &lt;/a&gt;
              &lt;/div&gt;  
  </code></pre>
  
  <p>ADD VIDEO CLIP FUNCTION</p>
  
  <pre><code>function CreateAddVideoClipButton(selectedVideoId) {
      var theElement = document.getElementById(selectedVideoId);
      var videoUrl = theElement.getAttribute('url');
      var videoThumb = theElement.getAttribute('src');
      var videoTitle = theElement.getAttribute('title');
      var videoId = theElement.getAttribute('id');
      selectedImageId = videoId;
      //var userModel = new VideosViewModel();
      var text = "&lt;input type=\"button\" id=\"addButton\" class=\"addButton\" value=\"Add Video Clip\" onclick=\"addVideo(" + "'" + videoUrl + "'" + ", " + "'" + videoThumb + "'" + "," + "'" + videoTitle + "'" + "," + "'" + videoId + "'" + ");\" /&gt;";
      //var text = "&lt;a href=\"#\" onclick=" + userModel.addToPlaylist() + "\"&gt;Add Video&lt;/a&gt;";
      currentimageid = text;
      currentSelectedImageId = selectedImageId;
      hidePlayer();
  }
  </code></pre>