javascript - 单击按钮时映射在 knockout 中不起作用

Question

通过单击按钮，映射在 knockout 中不起作用，

我在 knockout 中使用了映射，同时在单击按钮时更改输入文本值未正确更改。 单击加载用户数据按钮后需要更改名称输入文本的值

这是我的代码，

    <div class='sample'>
    <p>Load: <input type="button" value="Load User Data" data-bind="click: loadUserData" /></p>
    <p>Name: <input data-bind='value: firstName' /></p>
    <p>Save: <input type="button" value="Save User Data" data-bind="click: saveUserData" /></p>
</div>
<script>
    $(document).ready(function () {
        var viewModel = {};
        viewModel.firstName = 'Knockout JS';
        viewModel.loadUserData = function () {
            $.getJSON("/data.json", function (data) {
                // update the data in existing ViewModel.
                viewModel.firstName = data.name;
                ko.mapping.fromJS(data, viewModel);

            });
        };
        viewModel.saveUserData = function () {
            // Convert the viewModel into JSON.
            var data_to_send = { userData: ko.toJSON(viewModel) };
            // Send that JOSN data to server.
            $.post("WebService.asmx/updateData", data_to_send, function (data) {
                alert("Your data has been posted to the server!");
            });
        };
        ko.applyBindings(viewModel);
    });
</script>

我有什么错吗？

Answer 1

为了使其更新 UI，您需要使firstName 可观察。

然后，当您想要修改可观察值时，您需要将其视为函数并将新值作为参数传递，如下所示 firstName('newValue')

查看链接here获取更多信息和下面的示例:

var masterVM = (function () {
  var self = this;      
  self.firstName = ko.observable("Knockout JS");
  self.loadUserData = function() {
    var currentName = self.firstName();
    self.firstName(currentName + "Updated");
  }
})();

ko.applyBindings(masterVM); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<p>Load: <input type="button" value="Load User Data" data-bind="click: loadUserData" /></p>
<p>Name: <input data-bind='value: firstName' /></p>