knockout.js - 无法解析 Knockout.js 中的绑定

Question

面对常见的“绑定问题”。下面是视图模型

    function DetailListViewModel() {

    this.details = new Details();
    this.productdetails = ko.observableArray([]);

    this.show = function (item) {
        $.getJSON("Products.json", {}, function (data) {
            this.productdetails.push(this.details.init(data));
        });
    };
    }

    function Details() {
    this.author = ko.observable();
    this.text = ko.observable();
    this.init = function (temp) {
        return {
            author: temp.Author,
            text: temp.Text
        };
    };
    }

    var TaskListViewModel = {    
    tasks: ko.observableArray([]),
    addTask: function () {
    self.tasks.push(new Task({ BomID: this.BomID() }, { CreatedBy: this.CreatedBy() }));
    },
    ShowProductInfo: function (item) {       
        DetailListViewModel.show(item);
    }
    };


    $(function () {    
    $.getJSON("Tasks.json", function (allData)       {
            TaskListViewModel.tasks.push(toKoObserable($.parseJSON(allData.GetDataResult).RESULT.DOCUMENT));
        ko.applyBindings(TaskListViewModel);
        var DetailListViewModel = new DetailListViewModel();
        ko.applyBindings(DetailListViewModel);
    });

    function toKoObserable(blog) {
        return {
            BomID: ko.observable(blog[0].BOMID),
            CreatedBy: ko.observable(blog[0].CreatedBy)
        };
    }
});

我收到此错误

Uncaught Error: Unable to parse bindings.
Message: ReferenceError: author is not defined;
Bindings value: text:author 

我的 HTML 是：

<h3  data-bind="text:author">/h3>

Answer 1

我很确定，如果您更改细节实现，一切都应该按您的预期工作。我不确定为什么您的详细信息列表包含一个详细信息实例，然后您创建了一个可观察的详细信息数组重用该对象。从设计的角度来看，这似乎并不正确。此外，您的 init 不会返回可观察的值。尝试更改为以下内容：

function Details(author, text) {
    this.author = ko.observable(author);
    this.text = ko.observable(text);
}

然后，当您填充详细信息列表时，您将执行以下操作：

function DetailListViewModel() {
    this.productdetails = ko.observableArray([]);

    this.show = function (item) {
        $.getJSON("Products.json", {}, function (data) {
            this.productdetails.push(new Details(data.Author, data.Text));
        });
    };
}