小编j_d*_*j_d的帖子

如何以编程方式输入搜索字符串并触发Google Maps API的places_changed?

所以我有一个带位置输入的搜索页面.如果用户来自带有搜索查询的其他页面,我想以编程方式将此查询输入到输入中并触发更改的位置.

这是我到目前为止所拥有的:

var searchBox = new google.maps.places.SearchBox(input);

$('input#location').val(searchQuery);
google.maps.event.trigger(searchBox, 'places_changed');
Run Code Online (Sandbox Code Playgroud)

但是,这给了我Cannot read property 'length' of undefined这行places_changed函数的错误:

var places = searchBox.getPlaces();

if (places.length == 0) {
  return;
}
Run Code Online (Sandbox Code Playgroud)

因此,在以编程方式填充输入时,可以清楚地searchBox返回.我怎么能绕过这个?undefinedgetPlaces()

更新: 这是一个JSFiddle来举例说明我的意思.

javascript jquery google-maps google-maps-api-3

6
推荐指数
1
解决办法
3055
查看次数

如何找到 AWS 密钥对公钥?

因此,我们团队中的一名开发人员似乎删除了我们App-Production.pem密钥中的公钥.ssh/authorized_keys,因此默认的 AWS 密钥对不再有效,从而破坏了我们的部署管道。

我在哪里可以找到要添加回的公钥authorized_keys?是否可以在无需启动新实例的情况下执行此操作?

security ssh ubuntu amazon-ec2 amazon-web-services

6
推荐指数
1
解决办法
5861
查看次数

如何获取两个S3存储桶之间的文件差异?

因此,我有一个S3视频桶(数百个),在此视频上,我使用ElasticTranscoder将所有内容转码为第二个优化的视频桶。

但是,当我检查第二个存储桶时,对象减少了40-50个,但是我无法弄清楚它们是什么(目录结构嵌套得很深,等等)。

如何使用来获取两个存储桶的文件差异aws s3api list-objects

也许存储桶中有不是视频的文件,我不知为何不知道这些文件。

unix shell amazon-s3 amazon-web-services aws-sdk

6
推荐指数
2
解决办法
5317
查看次数

插值 HSL 颜色

我正在构建一个星型可视化引擎,需要插入从 API 接收到的值。HSL 色标为:

\n\n
-.63, hsl: 228\xc2\xb0 100% 80%,\n.165, hsl: 224\xc2\xb0 100% 90%,\n.33, hsl: 240\xc2\xb0 100% 98%,\n.495, hsl: 64\xc2\xb0 100% 92%,\n.66, hsl: 52\xc2\xb0 100% 82%,\n.825, hsl: 28\xc2\xb0 100% 66%,\n2.057, hsl: 6\xc2\xb0 95% 65%,\n
Run Code Online (Sandbox Code Playgroud)\n\n

每颗星星都会返回 -.63 到 2.057 之间的颜色值,我需要一个函数来获取该值并沿着由上述停止点组成的光谱获取颜色。

\n\n

我之前得到过一些帮助,但我一生都无法弄清楚这一点,并且无法找到插值 HSL 值的简明教程或演练。我能解决这个问题的唯一方法是通过外部库,但这对于相对简单的事情来说似乎是一个荒谬的解决方案。任何帮助,将不胜感激!

\n

javascript hsl interpolation

5
推荐指数
1
解决办法
2245
查看次数

实现输入时不会触发React中的onChange吗?

我有一个Materialize输入,如下所示:

<input type="date" className="datepicker" onChange={this.props.handleChange} />
Run Code Online (Sandbox Code Playgroud)

它已由Materialize正确初始化,但在日期选择器的值更改时不会触发onChange。我在这里做错了什么?这个问题似乎扩展到所有实现输入。

javascript materialize reactjs

5
推荐指数
1
解决办法
785
查看次数

对于redux商店来说,有多大?

因此,我正在考虑将整个翻译对象放入redux商店,然后再保湿到客户端.这个翻译对象大约50kb gzip压缩,115kb未压缩.

我们整个网站都已翻译,因此该翻译对象基本上代表了整个网站的所有非动态副本.如果它在最初的http请求中充当客户端,它应该提供即时浏览体验,至少对于内部副本.

但是,我想知道这是否方式,对于redux商店来说太大了?

internationalization flux reactjs redux react-redux

5
推荐指数
1
解决办法
3468
查看次数

防止 KeyboardAvoidingView 导致内容重叠(React Native)?

我正在尝试KeyboardAvoidingView为注册表单创建一个区域。我已经把组件放到了一个可以在 iOS 和 Android 上进行实际键盘调整的地方。

然而,KeyboardAvoidingView与其向视图底部添加更多高度并向上滚动,似乎只是压缩了高度。

以下是在 Android 上的效果:

键盘调整前:

在此处输入图片说明

键盘调整后:

在此处输入图片说明

这是组件的代码:

<KeyboardAvoidingView keyboardVerticalOffset={20} behavior={Platform.OS === 'ios' ? 'padding' : null} style={mainWithFooter.container}>
  <View style={mainWithFooter.main}>
    <Text style={material.display1}>Create Your Account</Text>
  </View>
  <View style={mainWithFooter.footer}>
    <Input
      placeholder='First name'
      onChangeText={t => updateSignupForm('firstName', t)}
    />
    <Input
      placeholder='Last name'
      onChangeText={t => updateSignupForm('lastName', t)}
    />
    <Input
      placeholder='Email'
      keyboardType='email-address'
      autoCapitalize='none'
      onChangeText={t => updateSignupForm('email', t)}
    />
    <Input
      placeholder='Password'
      secureTextEntry
      onChangeText={t => updateSignupForm('password', t)}
    />
    <Button
      text='Create Account'
      onPress={signup}
      primary
      disabled={!signupFormIsValid}
      block
    />
  </View>
</KeyboardAvoidingView>
Run Code Online (Sandbox Code Playgroud)

和样式:

export …
Run Code Online (Sandbox Code Playgroud)

javascript css react-native

5
推荐指数
1
解决办法
708
查看次数

相对链接不适用于 nginx 反向代理

我正在将 NextJs 应用程序的基本路径反向代理到每个国家/地区的不同域上:

events {}
http {
    upstream nextjs_upstream {
        server localhost:3000;
    }

    server {
        listen 8080 default_server;

        server_name _;

        server_tokens off;

        location / {
            proxy_pass http://nextjs_upstream/us/;
        }
        location /_next/static {
            proxy_pass http://nextjs_upstream/_next/static;
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

这工作正常,我可以去http://localhost:8080查看我希望看到的内容 - 来自http://localhost:3000/us/.

此外,如果我添加这样的东西:

<Link href='/about-us'>
  <a>NextJs Link</a>
</Link>
Run Code Online (Sandbox Code Playgroud)

然后点击它,我正确地被发送到http://localhost:8080/about-us,它显示来自http://localhost:3000/us/about-us.

这一切都按预期工作,而且非常完美。

但是,我<a>在页面上也有一些硬编码的标签:

<a href="/about-us">
  Normal link
</a>
Run Code Online (Sandbox Code Playgroud)

您可以看到这是一个典型的相对 URL 链接。但是,当我单击它时,浏览器会将我导​​航到http://localhost:8080/us/about-us/,当然,它代理到的 404http://localhost:3000/us/us/about-us/并不存在。

如果我window.location = '/about-us'在浏览器控制台中执行此操作,也会发生此行为,但是,输出window.location.href"http://localhost:8080/". …

proxy reverse-proxy nginx devops nginx-reverse-proxy

5
推荐指数
1
解决办法
510
查看次数

Webpack 插件静态分析导出函数的使用情况?

首先,请注意,我是故意设置这个假设问题的,因为这是我面临解决的现实世界问题,并且不确定它是否可能。

假设我有一个名为 的 JavaScript 包,road-fetcher带有一个名为 的导出函数find,我可以将纬度/经度坐标传递到其中,并返回到该点的最近的道路。

所以:

import { find } from 'road-fetcher'

find(36.585940, -95.304241) // output: 'US Route 66'
Run Code Online (Sandbox Code Playgroud)

假设使用我的road-fetcher应用程序的用户最终find在其 Web 应用程序中使用此函数 200-300 倍(所有这些都是以可预测的、不可预测的Math.random方式)。

在内部,我的road-fetcher包正在向我的外部 API 发出网络请求。这工作得很好,但如果我们在运行时继续这样做,我们会在每个客户端上产生带宽和延迟成本(无论是在浏览器还是服务器中),但我们不一定需要。而且,也许所有 200 个调用都在同一页面上。相反,理想的做法是在构建时生成初始值,并可能设置一些长 TTL 以便稍后重新验证值。

使用 Webpack 处理 JavaScript 是很常见的,我想知道是否可以静态分析用户对该find函数的使用情况以找到所有排列。

理想情况下,我希望编译带有参数的函数调用的总列表,然后在构建步骤中基于此发出网络请求,但甚至能够编译所有函数调用参数的列表并将其存储在文件系统(不确定是在node_modules或 cwd 内),以促进单个缓存热步骤也足够了。

初步查看 Webpack 文档,这似乎可能一个起点,但我对此的了解还不够深入。evaluateCallExpressionMember

我很欣赏这是一个人为的例子,但它确实代表了一个非常现实的问题,我试图在这里简化以清楚地隔离手头的问题。

javascript optimization static-analysis node.js webpack

4
推荐指数
1
解决办法
642
查看次数

React/prefer-stateless-function vs class decorators?

所以,我正在建立一个全新的React项目,并将我的所有产品更新到最新版本.

这导致了项目中的一些夹板破损,所以我要经历并纠正这些.

我似乎遇到了相互矛盾的规则.React/prefer-stateless-function试图告诉我将我的组件编写为纯函数,但如果我这样做,我就不能再使用装饰器将我的组件连接到我的Redux存储.

人们如何解决这个问题?有问题的组件是一个"哑"组件(例如只有道具,没有状态),所以老实说它应该写成一个纯函数,但后来我失去了通过@asyncConnect和连接到我的商店的能力@connect.

带装饰器的类组件:

@connect(
  state => ({ // eslint-disable-line
    user: state.publicData.user.data,
    error: state.publicData.user.error,
    loading: state.publicData.user.loading,
  }),
  { initializeWithKey })
export default class UserProfile extends Component {
  ...stuff
}
Run Code Online (Sandbox Code Playgroud)

纯功能组件:

// How can I use decorators?
export default function UserProfile(props) {
  ...stuff
}
Run Code Online (Sandbox Code Playgroud)

两个装饰器组合的案例:

@asyncConnect([{
  deferred: true,
  promise: ({ params, store: { dispatch, getState } }) => {
    if (!isLoaded(getState())) {
      return dispatch(loadUser(params.userID))
    }
  },
}])
@connect(
  state => ({ // eslint-disable-line
    user: state.publicData.user.data,
    error: …
Run Code Online (Sandbox Code Playgroud)

javascript ecmascript-6 reactjs eslint redux

3
推荐指数
1
解决办法
1360
查看次数