4

knockout.js はかなり新しいものです。私は C# です。しかし、私の新しい仕事には、バックエンドに加えて多くのフロント エンドが含まれているため、最終的にこれに取り掛かりました。

とにかく、JQuery のクリック イベントから viewModel メソッドを呼び出したいという異常なシナリオに (私が思うに) 遭遇しました。おそらくこれはよくあることですが、よくわかりません::誰かが助けてくれることを願っています!

viewModel ファイルに単純な関数があります。 //add to playlist
self.addToPlaylist = function (video) {
self.addedVideos.push(video);
};

ファンシーボックスと呼ばれるJqueryライブラリを使用して、多数の画像をカルーセルにロードしているため、ビデオと呼ばれる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 です。の data-bind 属性内に click: $parent.addToVideos を含めるのが理想的ですが、この段階ではリッスンしているクリックが発生しないため、追加ボタンをレンダリングする必要があります。クリックすると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();
}
4

4 に答える 4

2

私が理解していることから、あなたは目立たないようにイベントを処理したいと思っています。

ここを見ると簡単です。

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

于 2012-12-20T10:05:35.037 に答える
2

あなたの問題は、onClick 属性と Knockout ハンドラーを混在させていることだと思いますが、代わりに Knockout ハンドラーを使用する必要があります。これらのハンドラーを使用すると、addVideoClipButton に追加したコードのようなボイラー プレート コードがすべて処理されます。

例：

 <button data-bind="visible: showAddButton, click: $parent.addToPlaylist">Add to playlist</button>

あなたのコードをfiddleにコピーしました。Knockout ハンドラーを使用してコードを単純化する方法を見てください。

于 2012-12-20T11:02:35.773 に答える
0

あなたはこのようなことをすることができます -

ビューモデル -

var searchViewModel = function () {
    var self = this;

    self.search = function (param) {
    //do something
    };

}

HTML -

<button data-bind="click: function () { Search() }" class="" id="searchBtn">Search</button>

Jクエリ -

function Search() {
// paramvalue = 1; 
viewModel.search(paramvalue);                  
}
于 2015-04-21T09:22:29.387 に答える
0

私はそのようなことをします

var VideosViewModel = {
    addToPlaylist : function () {
        alert("Added to playlist");
    }
};

ko.applyBindings(VideosViewModel);

$('#testBtn').click(function(){
    VideosViewModel.addToPlaylist();            
});
​

http://jsfiddle.net/VyUT4/4/

于 2012-12-20T10:15:14.543 に答える