Knockout ateşleme clickBindings'e tıklayın.

Question

Son zamanlarda ViewModel'i ayrı bir JavaScript dosyasına ayırdım. İşte

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

tıklama görünümü modeli

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

Sorun önizleme işlevine veri bağlama hangi HTML ve HTML kullanıcı arayüzü bir düğme

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

Nakavt ilgili koddur Aşağıdaki satır $ (document) .ready() işlevi

içinde yürütüldüğünde önizleme yöntemi çağrılır.

Bu, kullanıcı Önizleme düğmesine tıklandığında önizleme işlevi tetiklenir. Bu davranış için sebep ne olabilir? HTML sayfasının kendisinde model JavaScript'i görüntülediğimde her şey iyi çalışıyordu.

Answer 1

Bunun nedeni, gerçekten önizleme işlevini çağırıyor olmanızdır (çünkü functionName'un yazılması, işleve atıfta bulunduğu anlamına gelir, functionName()'un yazılması, bunun anlamı anlamına gelir). data-bind="click: Report.preview" Bu nedenle, data-bind="click: Report.preview" beklendiği gibi çalışır, ancak parametreyi devretmeden.

the manual gibi (farklı konu üzerine ancak bu hala geçerlidir) belirtir: bunu yapmak için

Eğer daha fazla parametre geçmek gerekiyorsa, tek yön alır değişmez bir işlevde, işleyici sarma gereğidir Bu örnekte olduğu gibi bir parametre,:

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

ya sizin durumda:

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

Başka bir çözüm bir işlev (aslında hemen hemen aynı şeyi) return) (önizleme yapmak olacaktır:

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

Answer 2

Başka bir çözüm kullanmaktır 'bağlamak' inşa:

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

nerede ilk Bağlanacak parametre() çağrılan işlevde 'bu' olur.