使用knockout.js 过滤器绑定的问题

debugcn 发表于 Dev

何塞·劳尔·佩雷拉

我是使用 Knockout.js 框架的新手，我的代码中出现以下错误，我正在使用 Knockout.js 构建应用程序，一切正常，除非我尝试创建一个dependentObservable。

这是javascript代码：

(function() {
  'use strict';

    console.log("This is my Application");

     var app = {
         mapElement: document.getElementById('map'),
         mapObj: map,
         locations : ko.observableArray([
            {id: 1, title: 'Holywood Theater', location: {lat: 43.098344, lng: -76.145697}},
            {id: 2, title: 'Mattydale Fire Department', location: {lat: 43.098172, lng: -76.142189}},
            {id: 3, title: 'Original Italian Pizza', location: {lat: 43.098854, lng:  -76.144700}},
            {id: 4, title: 'Roxboro Road Middle School', location: {lat: 43.101110, lng: -76.150901}},
            {id: 5, title: 'Big Lots', location: {lat: 43.101400, lng: -76.146985}},
            {id: 6, title: 'Camnel pub', location: {lat: 43.098670, lng: -76.145832}}
        ]),
        markers:[],
        textFilter: ko.observable(),
        filterLocations: ko.dependentObservable(function () {
                            return ko.utils.arrayFilter(app.locations(), function (loc) {
                                return loc.title().toLowerCase().includes(app.textFilter().toLowerCase());
                            });
                        })
     };

    ko.applyBindings(app);
})();

chrome 控制台中的错误是：

未捕获的类型错误：无法读取未定义的属性“位置”

花花公子

在视图模型中使用对象字面量时，您应该将计算/依赖的 observables 定义为

app.filterLocations = ko.computed(function () {
                        return ko.utils.arrayFilter(this.locations(), function (loc) {
                            return loc.title.toLowerCase().includes(app.textFilter().toLowerCase());
                        });
                    }, app);

请注意将appobject 作为第二个参数传递给定义范围的计算函数this。

也使用computed代替dependentObservable.

计算观测值

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。