通过单击按钮，映射在淘汰赛中不起作用答案

【问题标题】：Mapping not working in knockout with the button click通过单击按钮，映射在淘汰赛中不起作用
【发布时间】：2017-09-09 03:36:49
【问题描述】：

在点击按钮时映射不工作，

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

这是我的代码，

    <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>

我有什么问题吗？

【问题讨论】：

标签： javascript jquery knockout.js knockout-mapping-plugin

【解决方案1】：

为了让它更新 UI，你需要把名字设为observable。

然后当你想修改一个可观察的值时，你需要把它当作一个函数，并将新值作为参数传递，就像这样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>

【讨论】：