在 knockoutjs 中“未捕获的错误：无法解析绑定”。错误，但代码有效答案

【问题标题】：In knockoutjs “Uncaught Error: Unable to parse bindings.” error, but code works在 knockoutjs 中“未捕获的错误：无法解析绑定”。错误，但代码有效
【发布时间】：2017-09-13 22:12:38
【问题描述】：

我正在处理淘汰赛 js 映射，在尝试执行示例时出现控制台错误。

未捕获的错误：无法解析绑定。消息：参考错误： loadUserData 未定义；绑定值：点击：loadUserData

这里是代码，

<form action="#" method="post">
    <p>First name: <input data-bind='value: firstName' /></p>
    <p>Last name: <input data-bind='value: lastName' /></p>
    <div>
        Your favorite food:
        <select data-bind='options: activities, value: favoriteHobby'></select>
    </div>
    <p><button data-bind='click: loadUserData'>Load data</button></p>
    <p><button data-bind='click: saveUserData'>Save Data</button></p>
</form>
<script>
    function PersonViewModel() {
        var self = this;
        self.firstName = "";
        self.lastName = "";
        self.activities = [];
        self.favoriteHobby = "";
        self.loadUserData = function () {
            $.getJSON("/get-user-data.json", function (data) {
                var viewModel = ko.mapping.fromJS(data);
                ko.applyBindings(viewModel);
            });
        }
        self.saveUserData = function () {
            var data_to_send = { userData: ko.toJSON(self) };
            $.post("/save-user-data", data_to_send, function (data) {
                alert("Your data has been posted to the server!");
            }).fail(function () {
                alert("Ensure the Url before save the data");
            });
        }
    }
    ko.applyBindings(new PersonViewModel());
</script>

get-user-data.json

{
   "firstName": "John",
   "lastName": "Smith",
   "activities": [ "Golf", "Kayaking", "Web Development" ],
   "favoriteHobby": "Golf"
}

单击加载数据按钮时出现错误，但示例有效，如何清除此错误。

【问题讨论】：

在淘汰赛中，您使用 observables 更新您的 UI。您可以不两次应用绑定，就像在 loadUserData 的回调中所做的那样。我建议您阅读教程以了解如何使用来自服务器的数据更新视图模型。

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

【解决方案1】：

正如@user3297291 所指出的，您不能调用 ko.applyBindings 两次。取而代之的是，让你的视图模型敲除的属性成为可观察的，当它们发生变化时，敲除会自动更新你的 UI：

function PersonViewModel() {
    var self = this;
    self.firstName = ko.observable();
    self.lastName = ko.observable();
    self.activities = ko.observableArray();
    self.favoriteHobby = ko.observable();
    self.loadUserData = function () {
        return $.getJSON("/get-user-data.json", function (result) {
            self.firstName(result.firstName)
                .lastName(result.lastName)
                .favoriteHobby(result.favoriteHobby)
                .activites(result.activities);
        });
    }
}
ko.applyBindings(new PersonViewModel());

【讨论】：