javascript - KnockoutJS 中的 ViewModel 无法访问全局变量-6ren

javascript - KnockoutJS 中的 ViewModel 无法访问全局变量

转载作者：行者123 更新时间：2023-12-03 03:18:49

24

4

我正在使用 KnockoutJS 库开发一个简单的 Google map 应用程序 - 或者至少它在概念上看起来足够简单。在阅读了 KnockoutJS 并编写了一些示例之后，我将初始部分组合在一起。到目前为止，html 只是 map ，我的目标是在克服第一个障碍后立即填充列表。障碍在于 JavaScript。以下是引用代码:

"use strict";

var map;
var center;
var defaultBounds;
var placesServices;

//LocationObject created to hold data for locations generated from google.places.nearbySearch
var LocationObject = function(data){

    this.position = data.geometry.location;
    this.lat = data.geometry.location.lat;
    this.lng = data.geometry.location.lng;
    this.name = data.name;
    this.placeID = data.place_id;
    this.rating = data.rating;
    this.types = data.types;
    this.linkToPhoto = data.html_attributions;

};



function initMap(){

    map = new google.maps.Map(document.getElementById('map'), {
        center: center,
        zoom: 17,
        mapTypeId: 'satellite',
        draggable: true, 
        zoomControl: false, 
        scrollwheel: true, 
        disableDoubleClickZoom: true
    });

    defaultBounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(47.614217, -122.317981),new google.maps.LatLng(47.612975, -122.316291));
    map.fitBounds(defaultBounds);

    placesServices = new google.maps.places.PlacesService(map);

}


    //ViewModel created to observe changes on the map
var MapViewModel = function(){
    var self = this;

    self.testarr = ko.observableArray([
        { firstName: 'Bert', lastName: 'Bertington' },
        { firstName: 'Charles', lastName: 'Charlesforth' },
        { firstName: 'Denise', lastName: 'Dentiste' }
    ]);

    self.locations = ko.observableArray([]);
    self.markers = [];

    this.getNearbyLocations = function(){
        if(placesServices === undefined){
            placesServices = new google.maps.places.PlacesService(map);
        }

        var request = {
            location: center,
            radius: getBoundsRadius(defaultBounds),
            type: ['establishment']
        };

        placesServices.nearbySearch(request, function(results, status) {
            if (status === google.maps.places.PlacesServiceStatus.OK) {
                for (var i = 0; i <= 18; i++) {
                    var marker = new google.maps.Marker({
                        map: map,
                        position: results[i].geometry.location,
                        animation: google.maps.Animation.DROP
                    });
                    self.locations.push(new LocationObject(results[i]));
                    self.markers.push(marker);
                }
            } else{
                alert("We were not able to find any nearby locations in this Neighbourhood.");
            }
        });
    };

    this.init = function(){

        self.getNearbyLocations();

    };
};


var myMapViewModel = new MapViewModel();
myMapViewModel.init();
ko.applyBindings(myMapViewModel);   



/* Utility Functions */
function getBoundsRadius(bounds){....}

错误是:

Uncaught ReferenceError: google is not defined
at MapViewModel.getNearbyLocations

我不明白为什么它在这里没有被识别，本地图本身首先加载时没有问题，但在这里它挂起了。

这是供引用的html，但那里应该没有问题:

<!DOCTYPE html>
<html lang="en">
  <head>
   <!-- Required meta tags -->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

   <!-- Per Google guideline scheduled for the M65 release, css has been moved to an importer -->
   <link rel="import" href="importer.htm"></link>

   <!-- Bootstrap CSS -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">


  </head>
  <body>
   <div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 col-md-4">
            <!-- List goes in this column. -->

            </div>
        </div>
        <div class="col-xs-12 col-md-8">
            <!-- Map goes into this column. -->
            <div id="map" style="width:100%;height:100vh;"></div>
        </div>
      </div>
     </div>

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<!-- Optional JavaScript -->
<script src="js/knockout.js" ></script>
<script src="js/app.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC-1EdIyUOb74oGG_mEoPvJTAGCSJvSQms&callback=initMap&libraries=places"></script>
 </body>

最佳答案

我还认为该错误是因为您的 app.js 在 map 脚本之前被调用。但我尝试更改它，同样的错误，并且我还尝试删除 async 参数(如 user3297291 的评论所建议)，仍然是同样的错误。理论上是should have worked .

但这有效 - 将 app.js 代码的最后 3 行包装在 ready() 函数中:

$(document).ready(function(){
    var myMapViewModel = new MapViewModel();
    myMapViewModel.init();
    ko.applyBindings(myMapViewModel); 
});

关于javascript - KnockoutJS 中的 ViewModel 无法访问全局变量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46659746/

24

4

0

文章推荐： javascript - React 有条件更新列表

文章推荐： javascript - 在浏览器的子窗口中登录完成后通知父窗口

文章推荐： javascript - 将其余代码作为回调函数传递

文章推荐： javascript - HTML5 相机在 Tomcat7 中无法工作

viewmodel - ViewModel 模式最大的痛点是什么？
Glenn Block 和我一直在研究 ViewModel 模式。我们一直在尝试找出与该模式相关的最大痛点，目标是添加框架支持以减轻痛苦。今晚，格伦发帖，“View Model” – the mov
c# - MVVM - 如何从父 ViewModel 引用子 ViewModel(ViewModel 在其 View 中创建)？
如果我使用 Views 创建 ViewModel 实例且 ViewModel 没有对 View 的引用的方法，我不知道创建 viewmodel 关系的正确方法是什么。假设我们有 ChildView
viewmodel - MvvmCross ViewModel 缓存和重新初始化
当从缓存中重新加载 ViewModel 时，我需要能够拦截框架并执行重新初始化。由于没有重新创建 ViewModel，我既不能使用 Init()、MvxViewModel.InitFromBundle
WPF ViewModel 与否 ViewModel
我的业务模型(实际上它用于使用 Entity Framework 6 读取数据)看起来像: class Profile : NameDescriptionBase { public virtu
ios - ViewModel 能否返回其他 ViewModel
我在swift中玩MVVM遇到了这种情况:我为 tableView 创建了模型，其中包含对象列表和对象计数。有点像 class TableViewViewModel { var count :
wpf - ViewModel 到 ViewModel 的通信
我正在研究由以下部分组成的应用程序区域: Explorer - 包含 TreeView PropertyInspector - 包含一个 PropertyGrid 编辑器 - 包含一个 Explore
c# - MVVM ViewModel 将参数传递给另一个 ViewModel
我正在使用 MVVM-Light，并且我有一个列出了销售人员的 DataGrid 工作。用户可以双击打开一个子窗口，该窗口将在网格上列出他们的销售，用户将能够在该网格下填写一些文本框以添加新的销售。
c# - 使用子 ViewModel 创建 ViewModel
是否有适当的方法来创建包含 subViewModel 的 C#/WPF ViewModel ？目标是: 我有一个主窗口。该窗口用于读取/创建图像。窗口上有一个按钮，可以在 2 个 UserContr
wpf - 我可以从其他子窗口 ViewModel 访问主窗口 ViewModel
首先，如果这很简单，我必须道歉。我对 WPF 和 MVVM 非常陌生，我想确保我没有违反任何 WPF 或 MVVM 概念。此外，对于下面的冗长解释(试图提供所有细节): 我目前正在引用具有所有业务逻辑
silverlight - ViewModel 事件注册和 ViewModel 生命周期
我有一个架构问题，以及一个我想提出意见的可能解决方案。我习惯于 WP7 的 MVVM 架构(尽可能但不幸的是，有时 sdk 似乎朝着相反的方向发展)。 WP7 强制采用 ViewFirst 方法，我
mvvm - ViewModel 到 ViewModel 的通信
鉴于以下情况: ViewModelA 启动 ViewModelB(当然，通过一个通用 Controller ，它使用 Ioc 和 DI 来解析所需的类型)。 ViewModelB 需要在 ViewMo
c# - 将属性从子 ViewModel 返回到父 ViewModel
在我的 WPF MVVM 应用程序中，使用 Caliburn.Micro，我有一个 ViewModel，CreateServiceViewModel，在单击按钮时，它会在单独的窗口中打开一个 Grid
c# - 验证不同于页面 ViewModel 的 ViewModel
假设我有一个采用特定 ViewModel 的页面( View ): @model IEnumerable 在这个页面中，我有一个通过另一个 ViewModel(我们称之为 PostModel)发布数据
c# - 如何将一个 ViewModel 转换为另一个 ViewModel？
我有两个相似的 ViewModel，我需要将一个转换为另一个。这是第一个: using System; using System.Collections.Generic; using System.
c# - 静态 ViewModel 与实例化 ViewModel
我有两个 View 共享来自某个 View 模型的一个可观察集合，但具有不同的 Collection View 参数。在 MVVM Light 中实现它的正确方法是什么？是否支持非静态虚拟机？我如何管
android - 如何从另一个 viewModel 中的 viewModel 访问函数
我有 2 个 View 模型 - 主视图模型** 存储 View 模型 StorageViewModel.kt class StorageViewModel @ViewModelInject cons
android - 如何在另一个 ViewModel 中使用来自一个 ViewModel 的数据
我有一个 AddressesViewModel 保存用户最喜欢的地址，另一个 SearchViewModel 保存搜索到的地址。当用户搜索地址时，我必须通过检查收藏夹数组来检查该地址是否是收藏夹。正确
MVVM - 如何将 ViewModel 包装在 ViewModel 中？
首先，我看过this post并没有找到我的问题的答案。我不确定这是否是汇总型号类或聚合查看型号类，但这就是我所拥有的: 在我的 WPF(使用 Prism)应用程序中，我有一个 View “
SwiftUI 获取 ViewModel 中另一个 ViewModel 的值
我的 View 中有这些过滤器，它们都会更新 FilterViewModel，然后由它负责过滤数据。其中一个 View ，SearchAddressView 需要 PlacemarkViewModel
MVVM:一个 ViewModel 是否应该有另一个 ViewModel 的成员？
依赖的 ViewModel 通过构造函数(IoC 容器)注入(inject)。示例:ProductSelectionViewModel 使用 ShoppingBasketViewModel。这是一

首页

博学

6Ren·AI

商城

javascript - KnockoutJS 中的 ViewModel 无法访问全局变量