Нокаут стрельбы нажмите кнопку привязки на applyBindings

недавно я выделил ViewModel в отдельный файл JavaScript.

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

вот HTML и нокаут связанный код

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

HTML пользовательский интерфейс имеет кнопку, на которой нажмите является привязка данных к функции предварительного просмотра в модели представления

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

метод предварительного просмотра вызывается, когда следующая строка выполняется в $(document).готовые (функция)

ko.applyBindings(Report, document.body);

то есть без нажатия пользователем на кнопку предварительного просмотра запускается функция предварительного просмотра. Что может быть причиной такого поведения? Весь материал работал нормально, когда я просматривал модель JavaScript на самой HTML-странице.

2 58
javascript knockout.js

2 ответа:

причина в том, что вы действительно вызываете функцию предварительного просмотра (потому что писать functionName означает обращение к функции, пишет functionName() значит называть его).

так data-bind="click: Report.preview" будет работать как положено, но без передачи параметра.

как руководство государства (на другую тему, но это все еще применяется):

Если вам нужно передать больше параметров, один из способов сделать это-обернуть обработчик в функцию литерал, который принимает параметр, как в этом примере:

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

или в вашем случае:

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

другим решением было бы сделать preview () возвращать функцию (почти то же самое на самом деле):

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

другое решение-использовать конструкцию' bind':

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

где первый параметр для привязки () станет 'this' в вызываемой функции.

21