thay đổi sự kiện hộp đầu vào knockout.js - chuyển giá trị cũ

Question

Khi thêm sự kiện thay đổi ràng buộc vào hộp nhập bằng cách sử dụng knockout.js, giá trị cũ được chuyển đến hàm thay đổi khi sự kiện được kích hoạt. Tôi có thể giải quyết vấn đề này bằng cách sử dụng làm mờ. Đây có phải là hành vi dự định không? Ý tưởng có sử dụng sự kiện thay đổi để có giá trị cũ và sau đó sử dụng bộ chọn thông thường để lấy giá trị từ dom? Có vẻ như truy cập trực quan.

jsFiddle Example

JavaScript 
---------- 
var data = { 
    saved_value:"1", 
    value_changed: function(data){ 
     alert(data.saved_value()); 
    } 
}; 
var viewModel = ko.mapping.fromJS(data); 
ko.applyBindings(viewModel); 

HTML 
---- 
Current Value:<span data-bind="text:saved_value"></span><br/> 
<input data-bind="event:{change:value_changed},value:saved_value"></input> 

Answer 1

Hãy thử sử dụng văn bản và giá trị ràng buộc:

Current Value:<span data-bind="text: saved_value"></span><br/> 
<input data-bind="value: saved_value"></input> 

Và thay đổi JavaScri pt này:

var data = { 
    saved_value: "1"  
}; 

var viewModel = ko.mapping.fromJS(data); 
ko.applyBindings(viewModel);​ 

Dưới đây là một jsFiddle liên quan: http://jsfiddle.net/6zmJs/

Nếu bạn muốn alert() giá trị của saved_value khi nó được cập nhật, bạn có thể sử dụng ko.computed hoặc viewModel.saved_value.subscribe(function(value) { alert(value); }); - mặc dù những không phải là cách duy nhất để làm điều này.

Answer 2

Không, đây không phải là cách đúng đắn để làm điều này.

Bạn nhận được giá trị cũ vì saved_value không được cập nhật cho đến khi hộp văn bản bị mất tiêu điểm.

Nếu bạn muốn đẩy giá trị mới trong khi người dùng, sử dụng tùy chọn valueUpdate của đầu vào ràng buộc:

<input data-bind="event: { change: value_changed }, value: saved_value, valueUpdate: 'afterkeydown'" /> 

Tùy chọn valueUpdate mất một tên sự kiện (ví dụ 'KeyUp'). Khi sự kiện đó kích hoạt, giá trị saved_value của bạn sẽ được cập nhật.

---

Bây giờ, hãy để tôi đề xuất giải pháp thay thế.

Tuy nhiên làm valueUpdate ràng buộc như tôi đã giới thiệu ở trên, nhưng thay vì lắng nghe các sự kiện thay đổi, chỉ cần đăng ký vào quan sát:

<input data-bind="textInput: saved_value" /> 

Sau đó, trong JS:

var viewModel = { 
    saved_value: ko.observable("1"), 
}; 
viewModel.saved_value.subscribe(function (newValue) { 
    alert(data.saved_value()); 
}); 
ko.applyBindings(viewModel); 

Answer 3

Nếu bạn đặt tùy chọn 'sự kiện' ở cuối, bạn không cần tùy chọn 'valueUpdate'. Như thế này:

<input data-bind="value: saved_value, event: { change: value_changed }" />

Cũng lưu ý rằng khi bạn sử dụng đăng ký với một quan sát được, nó được kích hoạt mỗi khi thay đổi giá trị của bạn. (theo tương tác của người dùng hoặc theo lập trình).

Answer 4

Hãy thử điều này trong các dữ liệu ràng buộc xử lý ghi sự kiện, sau khi xử lý giá trị và không trước:

<input data-bind="value: property, event:{ change: doSomething}" />