Bastante nuevo para knockout.js soy un C#’er, pero mi nuevo trabajo implica MUCHO más frontal, además de back-end, así que finalmente tuve tiempo para esto.

De todos modos, me he encontrado (creo que lo es) un inusual escenario donde quiero llamar a un viewModel método de un evento click en JQuery; tal vez esto ES común, pero no acabo de entenderlo:: con la Esperanza de que alguien pueda ayudar!

Tengo una simple función en mi viewModel archivo:
//add to playlist
self.addToPlaylist = function (video) {
self.addedVideos.push(video);
};

Estoy usando una librería de Jquery llamado fancybox para cargar un número de imágenes en un carrusel, así que he enlazado a mi observableArray llamado vídeos

<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>    

Este es el código html completo para este div. Lo ideal sería que haga clic en: $padre.addToVideos dentro de los enlazar los datos de atributos en el, sino porque el clic que estoy escuchando no sucede en esta etapa tengo que hacer que un botón agregar.
La idea de que el clic se abre la vista previa en fancybox y, a continuación, el usuario puede cerrar la ventana, o haga clic en agregar para agregar este video a la matriz.

Ok, esperemos que tenga sentido para la gente…

En mi método Jquery CreateAddVideoClipButton, tengo:

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

y aquí es donde estoy atascado.
Necesito saber cómo permitir que el haga clic en esta etapa, llamada la addToPlaylist método en mi viewModel

Si usted necesita más información para que esto hará sentido, por favor hágamelo saber.


DE EDICIÓN: PUBLICADO CÓDIGO

ViewModel:

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>  

AGREGAR VIDEOCLIP DE LA FUNCIÓN

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();
}
Es el VideosViewModel el modelo que tiene el addToPlaylist() función? Podría publicar código esqueleto de sus modelos de aclaración?
¿Qué quiere decir «, sino porque el clic que estoy escuchando no sucede en esta etapa»?
el nuevo código va a explicar:
Espero que esto ayude
Gracias! Voy a echar un vistazo

OriginalEl autor richardterris | 2012-12-19

4 Comentarios

  1. 2

    Creo que tu problema es que estás mezclando onClick atributos y knock-out controladores, mientras que por el contrario se debe usar sólo el knock-out de los manipuladores. El uso de estos controladores se encargará de todas las calderas de la placa de código como el que se agregó en el addVideoClipButton.

    Ejemplo:

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

    He copiado el código para un el violín, echa un vistazo a cómo se puede simplificar el código, haciendo uso de los octavos de controladores.

    Debido a las limitaciones de tiempo terminamos el uso de un simple jQuery para mucho de esto, pero durante las vacaciones tengo la intención de tratar de re-escritura de la aplicación con knock-out de la tierra para arriba. Voy a probar tu sugerencia y, a continuación, se marca como respuesta si ayuda. Gracias por todas las sugerencias de los chicos y feliz Navidad a todos!

    OriginalEl autor thomaux

  2. 0

    Me gustaría hacer algo como eso

    var VideosViewModel = {
        addToPlaylist : function () {
            alert("Added to playlist");
        }
    };
    
    ko.applyBindings(VideosViewModel);
    
    $('#testBtn').click(function(){
        VideosViewModel.addToPlaylist();            
    });
    

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

    OriginalEl autor Moes

  3. 0

    Puede hacer algo como esto –

    ViewModel –

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

    HTML –

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

    Jquery –

    function Search() {
    //paramvalue = 1; 
    viewModel.search(paramvalue);                  
    }

    OriginalEl autor Chetan Naithani

Dejar respuesta

Please enter your comment!
Please enter your name here