Question

从bnockout.js开始，我无法弄清楚我的代码有什么问题。也许有人可以帮忙： - ）

<!-- ko foreach: quotes -->
<tr>
    <td><p data-bind="text: quoteAuthor.name"></p></td>
    <td><p data-bind="text: quoteText"></p></td>
    <td data-bind="text: ko.toJSON(quoteReferences)"></td>
    <td style="width: 1px;">
    <div data-bind="if: quoteReferences">
    <!-- ko foreach: quoteReferences -->
        <a data-bind="attr: { href: quoteReference.url }" target="_blank">see <span data-bind="text: $index"></span></a>&nbsp;
    <!-- /ko -->
    </div>
    </td>
    <td style="width: 1px;">
        <button data-bind="click: $parent.removeQuote" class="btn btn-danger">Remove Quote</button>
    </td>
</tr>
<tr data-bind="if: quoteEvent">
    <td><p><b>Event</b></p></td>
    <td><p data-bind="text: quoteEvent.name"></p> - <p data-bind="text: quoteEvent.country.name"></p></td>
    <td><p data-bind="text: quoteEvent.date"></p></td>
    <td style="width: 1px;"></td>
</tr>
<!-- /ko -->

这是调试toJSON跟踪：

[{"id":0,"url":"http://www.google.fr","validators":null,"createdBy":null,"createdDate":null,"version":0}]

错误发生在“if：quoteReferences”标记上，但“foreach：quotes”工作正常。当quoteReferences为“Array [0]”时没有错误。并且“if：quoteEvent”标记适用于null或非null值。

对我来说，我不得不说，第一个问题来自于ajax函数返回一个数据结构，其中数组被解释为Array对象。这就是为什么我必须使这个循环来解释结果：

var uri = '/quotes?search=' + self.textPattern();
ajax(uri, 'GET').done(function(data) {
    console.log(data);
    for (index in data.content) {
        var item = data.content[index]; //DEBUG arrays turned into objects...
        console.log(item);
        self.quotes.push(item);
    }
})

这就是数据结构的样子：

enter image description here

更新：我对数据进行了深刻的可观察重构，取得了更大的成功。 quoteReferences不会被利用： - （

function deepObservable(object) {
    // console.log(object);
    if (object instanceof Array) {
        var tmp = ko.observableArray();
        for (index in object) {
            tmp.push(deepObservable(object[index]));
        }
        return tmp;
    } else if (object instanceof Object) {
        for (property in object) {
            object[property] = deepObservable(object[property]);
        }
        return object;
    }
    return ko.observable(object);
}

Answer 1

由于@ haim770直觉，整个问题（在弄清了对象/数组问题之后）来自第二个循环内的语境语法。非常感谢JavaScript最终导致错误的问题......顺便说一句，这个终极代码是有效的（参见REST客户端）：

<!-- ko foreach: quotes -->
<tr>
    <td><p data-bind="text: quoteAuthor.name"></p></td>
    <td>
        <div data-bind="visible: likesCount"><span data-bind="text: likesCount"></span></div>
        <a data-bind="click: $parent.likeQuote" title="click to like it"><span data-bind="visible: !quoteLiked" class="glyphicon glyphicon-heart-empty" style="color:red"></span></a>
        <a data-bind="click: $parent.likeQuote" title="click to unlike it"><span data-bind="visible: quoteLiked" class="glyphicon glyphicon-heart" style="color:red"></span></a>
    </td>
    <td><p data-bind="text: quoteText"></p></td>
    <td style="width: 1px;">
    <!-- ko foreach: quoteReferences -->
        &nbsp;<a data-bind="attr: { href: url }" target="_blank">see #<span data-bind="text: 1 + $index()"></span></a>
        <div data-bind="visible: starsCount"><span data-bind="text: starsCount"></span></div>
        <a data-bind="click: $root.starRef" title="click to star it"><span data-bind="visible: !refStarred" class="glyphicon glyphicon-star-empty" style="color:gold"></span></a>
        <a data-bind="click: $root.starRef" title="click to unstar it"><span data-bind="visible: refStarred" class="glyphicon glyphicon-star" style="color:gold"></span></a>
    <!-- /ko -->
        <button data-bind="click: $parent.beginAddRef" class="btn btn-sm btn-primary">New Reference</button>
    </td>
    <td style="width: 1px;">
        <button data-bind="click: $parent.removeQuote" class="btn btn-danger">Remove Quote</button>
        </td>
    </tr>
    <tr data-bind="if: quoteEvent">
        <td><p><b>Event</b></p></td>
        <td colspan="2"><p data-bind="text: quoteEvent.name"></p> - <p data-bind="text: quoteEvent.country.name"></p></td>
        <td><p data-bind="text: quoteEvent.date"></p></td>
        <td style="width: 1px;"></td>
    </tr>
<!-- /ko -->

感谢大家嘲笑我; - ）

knockout.js - 数据绑定的ReferenceError

1 个答案: