Question

我正在使用Google Maps API和KnockoutJS，创建了我正在传递它们的地图标记，以及动画（显示信息窗口和弹跳标记）以及observableArray中的位置名称，如下所示：

viewModel.addMarkersForKo(marker, venueName, doAnimation);

这（上图）采用标记，标记名称（venueName）和动画（显示传递的标记的infowindow，infowindow的内容和标记图标动画等之间的长组合列表）

addMarkersForKo: (aMarker, markerName, animation) => {
        let marker = {
            marker: aMarker,
            name: markerName,
            animation: animation
        };
        koViewModel.allMarkers().push(marker);
    }

这是我正在拿取值并在observableArray中进一步推送它以进行Knockout。

let koViewModel = {
    allMarkers: ko.observableArray()
};

koViewModel.Query = ko.observable('');

koViewModel.Search = ko.computed( () => {
    let q = koViewModel.Query();
    return koViewModel.allMarkers().filter( 
        (i) => i.name.toLowerCase().indexOf(q) >= 0
    )
});

最后这就是淘汰赛的结果，因为在做所有这些之前我就像这样绑定它：

ko.applyBindings(koViewModel);

这个（下面）是我的html绑定：

<input data-bind="textInput: Query, valueUpdate: 'keyup'" type="search" placeholder="Filter...">
<ul data-bind="foreach: Search">
    <li data-bind="text: name, click: animation"></li>
</ul>

一切都很完美，所以其余的代码都没有必要。它正确地过滤标记列表，然后单击列表项会弹出正确的标记，等等！

问题是加载页面后，列表是空的，只有在我输入一个字母后才会显示列表项......如果我例如按'A'然后'退格'它将显示列表中的所有标记。我已经通过控制台测试了这个ko.computed的结果，它只在按下一个键后运行，然后在按下一个键之前它返回undefined。如何在页面加载后立即返回标记并撰写列表项目。

Answer 1

使用afterRender绑定在开头执行它。

<input data-bind="textInput: Query, valueUpdate: 'keyup'" type="search" placeholder="Filter...">
<ul data-bind="foreach: Search, afterRender: Search">
    <li data-bind="text: name, click: animation"></li>
</ul>

Answer 2

代码： koViewModel.allMarkers().push(marker); 解包你的observableArray，然后直接将数据推送到底层数组（在依赖跟踪器的知识之外）。我建议将其改为：

koViewModel.allMarkers.push(marker); // note, pushing on the observableArrray, not the unwraped, underlying array

为什么在加载页面时knockoutjs不会运行此计算函数？

2 个答案: