无法处理绑定 - 绑定不是函数 - Unable to process binding

我正在为单个页面应用程序使用QuintOutJS，目前我陷入了一个神秘的问题。

我正在尝试显示下拉菜单，并使用敲除绑定填充它。为此，我使用的是在所有元素上迭代的foreach：

<div data-bind="foreach: favPlaces" class="dropdown-menu" aria-labelledby="dropdownMenuButton">
     <a data-bind="text: name, click: $parent.openInfoWindow" class="dropdown-item">Place Name</a>
</div>

然后，在我的ViewModel中，我具有OpenInFowWindow函数（单击下拉列表时应该调用）：

// View Model
var TokyoViewModel = function() {
    var self = this;
    // All the favorite places
    this.favPlaces = ko.observableArray([]);
    mFavPlaces.forEach(function(place) {
        self.favPlaces.push(new FavPlace(place));
    });
    this.openInfoWindow = function(favPlace) {
        console.log("Success!");
    }
}

问题是，当我添加单击时：openInFowWindow绑定到下拉级元素时，我会收到以下错误：

Uncaught TypeError: Unable to process binding "foreach: function (){return favPlaces }"
Message: Unable to process binding "click: function (){return $parent.openInfoWindow }"
Message: u(...).bind is not a function
    at Object.p (knockout-3.4.1.js:17)
    at knockout-3.4.1.js:89
    at Object.b (knockout-3.4.1.js:9)
    at init (knockout-3.4.1.js:89)
    at init (knockout-3.4.1.js:103)
    at knockout-3.4.1.js:72
    at Object.w (knockout-3.4.1.js:39)
    at knockout-3.4.1.js:72
    at Object.q (knockout-3.4.1.js:11)
    at m (knockout-3.4.1.js:71)

文本：名称绑定可以独立运行。

我在哪里犯了一个错误？

编辑：

这是有关实施的更多详细信息。请注意，地图Div是使用Google Maps API的地图。

<body>
    <div id="full-height">
        <div id="map"></div>
        <nav class="navbar navbar-inverse bg-inverse navbar-toggleable-md navbar-light bg-faded">
            <a class="navbar-brand" href="#">
                <i id="foursquare-logo" class="fa fa-foursquare" aria-hidden="true"></i>
            </a>
            <div id="location-dropup" class="btn-group dropup">
                <button type="button" class="btn btn-secondary">Best locations</button>
                <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="sr-only">Toggle Dropdown</span>
                </button>
                <div data-bind="foreach: favPlaces" class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <a data-bind="text: name, click: $parent.openInfoWindow" class="dropdown-item">Place Name</a>
                </div>
            </div>
        </nav>
    </div>
    <!-- Foursquare logo -->
    <script src="https://use.fontawesome.com/5228693ec0.js"></script>
    <!-- Bootstrap -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    <!-- KnockoutJS -->
    <script src="js/lib/knockout-3.4.1.js"></script>
    <script src="js/app.js"></script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDtODGjlNobKNCo4OX_voxjIkNkHCfQ3I4&callback=initMap"></script>
</body>

这是有关使用的JavaScript的更多详细信息。

var mFavPlaces = [
    {
        name: "Takeshita Street",
        lat: 35.6715659,
        lng: 139.7031469,
        imgSrc: "img/favPlaces/takeshita.jpg"
    }, {
        name: "Nakamise Street",
        lat: 35.7113873,
        lng: 139.794207,
        imgSrc: "img/favPlaces/asakusa.jpg"
    }, {
        name: "Yodobashi-Akiba",
        lat: 35.6995227,
        lng: 139.7734171,
        imgSrc: "img/favPlaces/akihabara.jpg"
    }, {
        name: "Meiji Jingu",
        lat: 35.6763976,
        lng: 139.6993259,
        imgSrc: "img/favPlaces/meiji.jpg"
    }, {
        name: "Shibuya Crossing",
        lat: 35.6594087,
        lng: 139.6981677,
        imgSrc: "img/favPlaces/shibuya.jpg"
    }
];
// Stores the Google maps markers for the favPlaces
var mMarkers = {};
var mQueryInfo = {
    "near": "Tokyo",
    "client_id": "AG5MATDOQ5HAXLODDIV1YALJZA4IN3LS5XEUOPWQIGHG0BHL",
    "client_secret": "PPJYHED0SI5WLWC05LXGD1E3T1JDQI23EWNSTQLI2MO0WEAF",
    "version": "20170220"
};
function httpGetAsync(theUrl, callback, infoWindow, placeIndex, marker) {
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            callback(xmlHttp.responseText, infoWindow, placeIndex, marker);
        }
    }
    xmlHttp.open("GET", theUrl, true); // true for asynchronous 
    xmlHttp.send(null);
}
function setFavPlaceInfo(placeName, infoWindow, placeIndex, marker) {
    var url = "https://api.foursquare.com/v2/venues/search?limit=1&near=" + mQueryInfo.near + "&query=" + placeName + "&v=" + mQueryInfo.version + "&client_id=" + mQueryInfo.client_id + "&client_secret=" + mQueryInfo.client_secret;
    httpGetAsync(url, setInfoWindowContent, infoWindow, placeIndex, marker);
}
function setInfoWindowContent(placeDetailsText, infoWindow, placeIndex, marker) {
    var placeDetails = JSON.parse(placeDetailsText);
    // Extract info to display in infoWindows
    var completeName = placeDetails.response.venues[0].name;
    var address = placeDetails.response.venues[0].location.address;
    var websiteUrl = placeDetails.response.venues[0].url;
    var numberCheckins = placeDetails.response.venues[0].stats.checkinsCount;
    var contentString = '<div class="infoWindow">' + '<img class="img-fluid img-thumbnail" src="' + mFavPlaces[placeIndex].imgSrc + '" style="margin-bottom:1rem;" alt="' + completeName + '" />' + '<h4>' + completeName + '</h4>' + '<b>Checkins: </b>' + numberCheckins + '<br>' + '<b>Website: </b> <a href="' + websiteUrl + '">' + websiteUrl + '</a>' + '<br>' + '<b>Address: </b> ' + address + '</div>';
    infoWindow.setContent(contentString);
    infoWindow.open(mMap, marker);
}
// Object representation of a favorite place
var FavPlace = function(data) {
    this.name = ko.observable(data.name);
    this.imgSrc = ko.observable(data.imgSrc);
}
// View Model
var TokyoViewModel = function() {
    var self = this;
    // All the favorite places
    this.favPlaces = ko.observableArray([]);
    mFavPlaces.forEach(function(place) {
        self.favPlaces.push(new FavPlace(place));
    });
    this.openInfoWindow = function(favPlace) {
        console.log("Success!");
    }
}
// Initialize the map and adds markers with infoWindows
function initMap() {
    var center = { lat: 35.6809814, lng: 139.7538745 };
    mMap = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        center: center
    });
    // Get details of favorite places 
    var placeIndex;
    for (placeIndex = 0; placeIndex < mFavPlaces.length; placeIndex++) {
        var marker = new google.maps.Marker({
            position: { lat: mFavPlaces[placeIndex].lat, lng: mFavPlaces[placeIndex].lng },
            map: mMap,
        });
        var infowindow = new google.maps.InfoWindow({});
        // Use a closure to add listeners
        google.maps.event.addListener(marker, 'click', (function(marker, placeIndex) {
            return function() {
                // Set infoWindow's content
                setFavPlaceInfo(mFavPlaces[placeIndex].name, infowindow, placeIndex, marker);
                // Set marker animation (lasts for 1 cycle == 750ms)
                marker.setAnimation(google.maps.Animation.BOUNCE);
                setTimeout(function() { marker.setAnimation(null); }, 750);
            }
        })(marker, placeIndex));
        // Store the marker
        mMarkers[mFavPlaces[placeIndex].name] = marker;
    }

}
// Activates knockout.js
ko.applyBindings(new TokyoViewModel());

编辑2：

使用您更新的源代码，我可以创建一个重现问题的JSFIDDLE。小提琴

似乎 SLIM 您正在加载的jQuery版本中缺少一些敲除位于存在的功能。具体来说，在这种情况下，" .bind"函数似乎在" foreach"绑定内部使用。如果您用应该清除的标准jQuery替换此脚本。

编辑1：

感谢您的回答。这实际上是我身边的一个错误，我忘了更新代码。实际上，我已经有$ parent.openinfowwindow。我也更新了错误日志。

在这种情况下，问题与您发布的任何代码都不相同。这是我从上面的代码中扔在一起的工作片段，除了我无法访问的初始" mfavplaces.foreach"。

// View Model
var TokyoViewModel = function() {
    var self = this;
    // All the favorite places
    this.favPlaces = ko.observableArray([]);
    
    //...
    self.favPlaces.push(new FavPlace("name goes here?"));
    this.openInfoWindow = function(favPlace) {
        console.log("Success!");
    }
}
var FavPlace = function(name){
  //unknown view-model
  var self = this;
  self.name = ko.observable(name);
}
ko.applyBindings(new TokyoViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="foreach: favPlaces" class="dropdown-menu" aria-labelledby="dropdownMenuButton">
     <a data-bind="text: name, click: $parent.openInfoWindow" class="dropdown-item">Place Name</a>
</div>

原始答案：

在此点绑定的上下文是个体位置。该名称绑定起来是因为名称是每个地方的属性。但是，您的点击功能似乎位于父视图模型上。您可以将点击绑定更改为：data-bind="text: name, click: $parent.openInfoWindow"，并且应该起作用。

对于那些不使用jquery.slim的人使用requient构建解决方案的人。以下垫片将解决您的问题：

require.config({
    //rest of config
    shim: {
        knockout: {
            deps: ["jquery"],
            exports: "knockout"
        }
    }
    //rest of config
});

由于加载JQuery和淘汰赛的种族条件，控制台中显示的错误正在发生。

无法处理绑定 - 绑定不是函数

相关内容

最新更新

热门标签：