javascript - for - Knockout disparando haga clic en el enlace en applyBindings

knockout js click binding

Question

Recientemente, he separado ViewModel en un archivo JavaScript separado.

var Report = (function($) {
    var initialData = [];
    var viewModel = {
        reports: ko.observableArray(initialData),
        preview: function(path) {
            // preview report
        },
        otherFunctions: function() {}
    };
    return viewModel;
})(jQuery);​

Aquí está el código relacionado con HTML y Knockout

<script type="text/javascript" src="path/to/report/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        ko.applyBindings(Report, document.body);
    });
</script>

La interfaz de usuario HTML tiene un botón en el que el clic es enlace de datos a la función de vista previa en el modelo de vista

<input type="button" name="Preview" id="Preview" class="btnPreview" 
    data-bind="click: Report.preview(''url/to/report'')" />

Se llama al método de vista previa del problema cuando la siguiente línea se ejecuta en la función $ (document) .ready ()

ko.applyBindings(Report, document.body); 

Es decir, sin que el usuario haga clic en la función de vista previa del botón de vista previa, se desencadena. ¿Cuál podría ser el motivo de este comportamiento? Todo estaba funcionando bien cuando veía el modelo de JavaScript en la página HTML.

Answer 1

La razón es que, de hecho, está invocando la función de vista previa (porque escribir functionName significa referirse a la función, escribir functionName() significa llamarlo).

Entonces data-bind="click: Report.preview" estaría funcionando como se esperaba, pero sin entregar el parámetro.

Como dice el manual (sobre un tema diferente, pero esto todavía se aplica):

Si necesita pasar más parámetros, una forma de hacerlo es envolviendo su manejador en un literal de función que toma un parámetro, como en este ejemplo:

<button data-bind="click: function(data, event) { myFunction(data, event, ''param1'', ''param2'') }">
    Click me
</button>

o en tu caso:

data-bind="click: function() { Report.preview(''url/to/report'') }"

Otra solución sería hacer que preview () devuelva una función (más o menos lo mismo en realidad):

preview: function(path) {
    return function() {
        // ...
    }
}

Answer 2

Otra solución es usar la construcción ''bind'':

data-bind="click: Report.preview.bind($data, ''url/to/report'')" 

donde el primer parámetro para bind () se convertirá en ''this'' en la función llamada.