applyBindings에서 Knockout 발생 클릭 바인딩

applyBindings에서 Knockout 발생 클릭 바인딩

---

최근에 ViewModel을 별도의 JavaScript 파일로 분리했습니다.

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

다음은 HTML 및 Knockout 관련 코드입니다.

<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) .ready () 함수에서 다음 줄이 실행될 때 문제 미리보기 메서드가 호출됩니다.

ko.applyBindings(Report, document.body); 

사용자가 미리보기 버튼을 클릭하지 않고 미리보기 기능이 실행됩니다. 이 행동의 이유는 무엇일까요? HTML 페이지 자체에서 모델 JavaScript를 볼 때 모든 것이 잘 작동했습니다.

---

그 이유는 실제로 미리보기 함수를 호출하고 있기 때문입니다 (쓰기 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() {
        // ...
    }
}

---

또 다른 해결책은 'bind'구조를 사용하는 것입니다.

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

bind ()의 첫 번째 매개 변수는 호출 된 함수에서 'this'가됩니다.

참고 URL : https://stackoverflow.com/questions/10119767/knockout-firing-click-binding-on-applybindings