jquery - 从 JQuery onclick 调用 Knockout.js viewModel 函数

Question

我对 knockout.js 很陌生，我是一名 C# 人员，但我的新工作除了后端之外还涉及很多前端，所以终于解决了这个问题。

无论如何，我遇到了(我认为是)一个不寻常的场景，我想从 JQuery 中的点击事件调用 viewModel 方法；也许这很常见，但我不太明白::希望有人能帮忙!

我的 viewModel 文件中有一个简单的函数: //添加到播放列表
self.addToPlaylist = 函数(视频){
self.addVideos.push(video);
};

我正在使用名为 fancybox 的 Jquery 库将大量图像加载到轮播中，因此我已绑定(bind)到名为视频的 observableArray

<div id="carousel" data-bind="foreach: videos">
             <!-- Left and right buttons -->
            <input id="left-button" type="button" value="" />
            <input id="right-button" type="button" value="" />
                <!-- All images with class of "cloudcarousel" will be turned into carousel items -->
                <!-- You can place links around these images -->
                <a class="fancybox-iframe" href="#" rel="group">
                    <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'));" />                     
                </a>
            </div>    

这是该 div 的完整 html。理想情况下，我会在数据绑定(bind)属性中单击: $parent.addToVideos ，但因为我正在监听的单击在此阶段不会发生，所以我必须渲染一个添加按钮。这个想法是，单击会在 fancybox 中打开预览，然后用户可以关闭窗口，或者单击“添加”将此视频添加到数组中。

好吧，希望这对人们有意义......

在我的 Jquery 方法 CreateAddVideoClipButton 中，我有:

var userModel = new VideosViewModel();
var text = "<a href='#' data-bind='click: userModel.addToPlaylist'>Add Video</a>";

这就是我陷入困境的地方。我需要知道如何在这个阶段允许点击，在我的 viewModel 中调用 addToPlaylist 方法

如果您需要更多信息以使其有意义，请告诉我。

<小时/>

编辑:发布的代码

View 模型:

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

HTML:

<div id="carousel" data-bind="foreach: videos">
             <!-- Left and right buttons -->
            <input id="left-button" type="button" value="" />
            <input id="right-button" type="button" value="" />
                <!-- All images with class of "cloudcarousel" will be turned into carousel items -->
                <!-- You can place links around these images -->
                <a class="fancybox-iframe" href="#" rel="group">
                    <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'));" />                     
                </a>
            </div>  

添加视频剪辑功能

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 = "<input type=\"button\" id=\"addButton\" class=\"addButton\" value=\"Add Video Clip\" onclick=\"addVideo(" + "'" + videoUrl + "'" + ", " + "'" + videoThumb + "'" + "," + "'" + videoTitle + "'" + "," + "'" + videoId + "'" + ");\" />";
    //var text = "<a href=\"#\" onclick=" + userModel.addToPlaylist() + "\">Add Video</a>";
    currentimageid = text;
    currentSelectedImageId = selectedImageId;
    hidePlayer();
}

Answer 1

据我了解，您希望不引人注目地处理事件。

如果你看这里，这很简单:

http://knockoutjs.com/documentation/unobtrusive-event-handling.html