javascript - knockout foreach 绑定(bind)不渲染任何内容

Question

我认为这是一个相当简单的 knockout 情况。我有一个来自 WebApi 的模型，其中包含一系列带有 Success 元素的事物。我需要成功的值来确定呈现哪些属性。我已经验证所有数据都来自 WebApi，但除了表外壳之外什么都没有呈现。开发控制台中没有错误。

HTML

<div id="model1Wrapper">
<table class = "table">
    <thead >
        <tr >
            <th >Stuff</th><th>Things</th> 
        </tr> 
    </thead>
    <tbody data-bind = "foreach: $data.historyArray" >
        <!--ko if: Success -->
        <tr class = "success" >
            <td data-bind = "text: $data.ThingA" > </td>
            <td data-bind = "text: ThingB" > </td> 
        </tr>
        <!-- /ko -->

        <!--ko ifnot: Success -->
        <tr class = "danger" >
            <td colspan="3" data-bind = "text: ThingC" > </td>
        </tr>
        <!-- /ko -->
    </tbody> 
</table>
</div>

模型数据示例

[{
    "ThingA": "A",
    "ThingB": "B",
    "ThingC": "C",
    "Success": false
}, {
    "ThingA": "A",
    "ThingB": "B",
    "ThingC": "C",
    "Success": true
}]

这是监视一个具有来自多个端点的提要的进程，因此我在页面上有多个 ViewModel。因此，我在页面的其他地方构建了一个粗略的示例，说明它是如何工作的。

该业务

<script>
    var sampleModelData = [{
        "ThingA": "A",
        "ThingB": "B",
        "ThingC": "C",
        "Success": false
    }, {
        "ThingA": "A",
        "ThingB": "B",
        "ThingC": "C",
        "Success": true
    }]


    var viewModel1 = {
        historyArray: ko.observableArray()
    };

    function onNewHistory(data) {
        viewModel1.historyArray(data);
    }

    $(document).ready(function(){
        ko.applyBindings(viewModel1, document.getElementById("model1Wrapper"));
        onNewHistory(sampleModelData);
    })

</script>

我必须掩盖一些细节，但要点是，ajax 调用在示例中返回一个数组。有一个函数被调用来将新数据更新到可观察中，我希望表能够重新渲染，但它不会。

其他deet

• 有时表中没有模型数据，所以我加载它并等待进行更新。所有其他 Viewmodel 都像这样加载，但是这个是唯一一个有数组的，也是唯一一个我遇到麻烦的与。

• 我尝试过去掉 if/ifnot 业务，但不起作用。

• Fiddler 讨厌我，我无法设置一个干净的版本来尝试。

• 我翻阅了一些相关问题，但似乎没有任何内容适合我的问题。或者这个例子应用起来要复杂得多。

谢谢!

Answer 1

问题出在这段代码中:

var viewModel1 = {
    historyArray = ko.observableArray();
}

您将声明对象的语法与函数内部代码的语法混合在一起。声明对象时，请勿使用 = 和 ;。请改用 : 和 ,。

如果将声明更改为如下所示，它应该可以工作。

var viewModel1 = {
    historyArray: ko.observableArray()
}