对 knockout.js 来说非常新,我是一名 C#'er,但我的新工作除了后端之外还涉及到更多的前端,所以最终解决了这个问题。
无论如何,我遇到了(我认为是)一个不寻常的场景,我想从 JQuery 中的点击事件中调用 viewModel 方法;也许这很常见,但我不太明白:: 希望有人能提供帮助!
我的 viewModel 文件中有一个简单的函数:
//add to playlist
self.addToPlaylist = function (video) {
self.addedVideos.push(video);
};
我正在使用一个名为 fancybox 的 Jquery 库将许多图像加载到轮播中,所以我已经绑定到名为 videos 的 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。理想情况下,我会 click: $parent.addToVideos 在 data-bind 属性中,但因为我正在侦听的点击在这个阶段不会发生,所以我必须呈现一个添加按钮。想法是单击打开fancybox 中的预览,然后用户可以关闭窗口,或者单击添加将此视频添加到数组中。
好吧,希望这对人们有意义......
在我的 Jquery 方法 CreateAddVideoClipButton 中,我有:
var userModel = new VideosViewModel();
var text = "<a href='#' data-bind='click: userModel.addToPlaylist'>Add Video</a>";
这就是我卡住的地方。我需要知道如何在这个阶段允许点击,在我的 viewModel 中调用 addToPlaylist 方法
如果您需要更多信息以使其有意义,请告诉我。
编辑:发布代码
视图模型:
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();
}