Question

我在单页应用程序中使用knockoutjs，目前我遇到了一个神秘的问题。

我正在尝试显示下拉菜单，并使用敲除绑定填充它。为此，我使用了一个遍历所有元素的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中，我有openInfoWindow函数（当单击下拉项时应该调用它）：

// 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!");
    }

}

问题是，当我添加click：openInfoWindow绑定到dropdown-item元素时，我收到以下错误：

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());

Answer 1

编辑2：

使用更新的源代码，我能够创建一个可以重现问题的jsFiddle。 fiddle

你加载的jQuery的 slim 版本似乎缺少一些假设存在的功能。特别是在这种情况下，“。bind”函数似乎在“foreach”绑定中使用。如果将此脚本替换为应清除的标准jquery。

编辑1：

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

在这种情况下，问题不在于您发布的任何代码。这是一个工作片段，我从上面的代码中汇总了，除了我无法访问的初始“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>

原始答案：

此时绑定的上下文是个别地方。名称绑定有效，因为name是每个地方的属性。但是，您的单击功能似乎位于父视图模型上。您可以将点击绑定更改为：data-bind="text: name, click: $parent.openInfoWindow"，它应该可以正常运行。

Answer 2

对于那些没有使用jquery.slim正在使用require构建解决方案的人。以下垫片将解决您的问题：

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

由于加载jQuery和Knockout时出现竞争条件，控制台中显示的错误正在发生。

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

2 个答案: