Cập nhật giá trị quan sát được khi giá trị đầu vào được thay đổi bởi Javascript

Question

Có cách nào để cập nhật một giá trị quan sát được khi giá trị <input> bị thay đổi, nhưng theo chương trình, tức là bằng Javascript?

Đây là một jsfiddle của trường hợp sử dụng này mà tôi không thể làm cho nó hoạt động: http://jsfiddle.net/qYXdJ/

Như bạn thấy khi "Cập nhật giá trị đầu vào bởi Javascript" liên kết được nhấp các quan sát được rõ ràng là không được cập nhật, vì nó không được phản ánh trong <span>

Answer 1

Nếu bạn hoàn toàn có thể không thay đổi quan sát trực tiếp (đó là cách tốt nhất), bạn có thể kích hoạt các "onchange" sự kiện (mà Knockout sử dụng trong nội bộ). Với jQuery, đó là một vấn đề đơn giản:

$('#update').on('click', function() { 
    $('#input2').val('New Value').trigger('change'); 
}); 

Nếu bạn không muốn sử dụng jQuery vì lý do gì, có một cái nhìn tại this question.

Answer 2

Bạn phải thay đổi thuộc tính viewModel 'name' thay vì giá trị trường đầu vào, vì nó có thể quan sát được và mọi thay đổi về thuộc tính sẽ được phản ánh cho tất cả các phần tử html được liên kết.

var viewModel = { 
     name: ko.observable() 
    }; 
    ko.applyBindings(viewModel); 

    document.getElementById('update').onclick = function(){ 
     viewModel.name('New Value'); 
     //document.getElementById('input2').value = 'New Value'; 
    } 

Answer 3

Vì cá cyanfish chỉ ra cách chính xác là cập nhật quan sát được.

Nếu vấn đề là mã của bạn không có quyền truy cập vào các quan sát được, ví dụ bạn đang viết một bookmarklet để tự động điền vào một mẫu đơn, sau đó bạn có thể truy cập vào các quan sát được như thế này:

function setValue(input, value) { 
    var bindingsString = input.getAttribute('data-bind'); 
    if (bindingsString) { 
    var bindings = ko.bindingProvider.instance.parseBindingsString(bindingsString, ko.contextFor(input), input); 
    if (bindings.value) { 
     bindings.value(value); 
    } else if (bindings.checked) { 
     bindings.checked(value); 
    } else { 
     input.value = value; 
    } 
    } else { 
    input.value = value; 
    } 
}