Questions tagged «javascript»

我已经实现了带有自定义选择模型以及自定义复选框选择插件的平滑网格。我还添加了组级别复选框，以允许在最高级别切换选择。我的要求之一是，仍可以通过任何父级分组复选框来选择折叠分组。 我的绊脚石似乎是我无法弄清楚如何选择当前在组中不可见的行。圆滑的网格将保留视觉上选定的项目集，而网格数据视图将保留完整的选定项目集（可见或不可见）。但是，当单击折叠行的组复选框时，我不知道如何将数据传输到数据中。 我像这样配置网格： let checkboxSelectionModel = new Slick.CheckboxSelectionModel(); this.grid.setSelectionModel(checkboxSelectionModel); this.grid.registerPlugin(new Slick.Data.GroupItemMetadataProvider()); let onSelectedRowIdsChanged = this.dataProvider.syncGridSelection(this.grid, true, true); onSelectedRowIdsChanged.subscribe( function(e: any, args: any) { //business logic stuff } ); let groupedCheckboxSelector = new Slick.GroupedCheckboxSelectColumn({ cssClass: "slick-cell-checkboxsel", onSelectedRowIdsChangedHandler: onSelectedRowIdsChanged }); let columns = this.grid.getColumns(); columns.unshift(groupedCheckboxSelector.getColumnDefinition()); this.grid.setColumns(columns); this.grid.registerPlugin(groupedCheckboxSelector); 要点要自定义插件，太长时间，包括在这里 特别是，如果你看看行57的slick.checkboxselectionmodel： $.each(dataItem.rows, function(index, groupRow) …

10 javascript  jquery  typescript  slickgrid 

我试图深入了解这个useEffect钩子。 我想知道何时使用哪种方法，为什么使用？ 1.useEffect with no second paraments useEffect(()=>{}) 2.useEffect with second paraments as [] useEffect(()=>{},[]) 3.useEffect with some arguments passed in the second parameter useEffect(()=>{},[arg])

10 javascript  reactjs  react-redux 

我正在从SAP B1服务层获取图像。在邮递员中，我可以将其查看为image/png，但显示时出现问题。 显示它的正确方法是什么<img />？ require(fetchedImage) -不起作用 我创建了一个Cloud Function来获取图像并将其传递给客户端，但是我不确定该怎么做。 有一个超级奇怪的东西是这样的 data: > '�PNGörönöu001aönöu0000öu0000öu0000örIHDRöu0000öu......... 不知道如何通过它，res.send(IMAGE IN PNG)这样我就可以在客户端看到图像。 检查base64转换，但不确定如何使用。 更新资料 邮递员要求：（此功能正常） GET：https : //su05.consensusintl.net/b1s/v1/ItemImages（'test'）/ $ value 标头：SessionId：尝试时询问我 由于某些原因，我们无法直接在前端获取图像，而需要创建一个中间件，因此我们在 Firebase Cloud Function 因此，这是获取图像并且不知道如何传递图像的函数。 这是Firebase Cloud Function中的函数： if (!req.body.productId) { res.status(400).send({ error: "productId is required" }); return; } console.log("Starting the process"); const productId = req.body.productId; …

10 javascript  node.js  api  sap  sapb1 

在电子商务商店中： 主页上显示了一些项目，每个项目下方都有一个“添加到购物车”按钮。单击此按钮后，该项目即被添加到购物车。如果再次单击此按钮，则购物车中已经存在的物料数量将增加1。我相信这是循环。到目前为止，一切都很好。 在“单一产品”页面上，有一个“添加到购物车”按钮。单击此按钮后，该项目将添加到购物车。还有一个“数量”输入文本框，可用于更改数量。也可以 问题： 我需要区分在循环中单击的“添加到购物车”按钮（当前在主页上，但也可以在其他页面上使用，例如“存档”页面等）与单击的“添加到购物车”按钮之间在“单一产品”页面上。基于这种差异，这是我需要做的： 如果单击了循环中出现的“添加到购物车”按钮，请使用来获取购物车中已经存在的此项目的数量，将其 $cart_item_key递增1，然后将其发送到自定义函数，该函数将进行其他处理并保存详细信息重新购物。 如果单击了“单个产品”页面中出现的“添加到购物车”按钮，请使用抓住购物车中已经存在的该商品 的数量$cart_item_key，将其乘以3，然后将其发送到自定义函数，该函数将进行其他处理并保存详细信息再次放入购物车。 在上述两种情况下，都会根据不同的逻辑更改“数量”，并且需要将该“数量”发送到自定义函数调用。 我尝试过的是： 我尝试了以下代码： add_action('woocommerce_add_to_cart', 'custom_action_add_to_cart', 20, 6); function custom_action_add_to_cart($cart_item_key, $product_id, $quantity, $variation_id, $variation, $cart_item_data) { $cart = WC()->cart->get_cart(); $product = wc_get_product($product_id); // NEED TO RUN CUSTOM CODE HERE BASED ON THE CHECKS if (add to cart within loop is clicked) { …

10 javascript  php  jquery  wordpress  woocommerce 

我遇到一种情况，我需要在页面呈现到服务器端并使用Next.js发送回我之前，先了解用户是否已登录，以避免UI中出现闪烁变化。 我能够弄清楚如果用户已经使用此HOC组件登录，如何防止用户访问某些页面... export const noAuthenticatedAllowed = (WrappedComponent: NextPage) => { const Wrapper = (props: any) => { return <WrappedComponent {...props} />; }; Wrapper.getInitialProps = async (ctx: NextPageContext) => { let context = {}; const { AppToken } = nextCookie(ctx); if (AppToken) { const decodedToken: MetadataObj = jwt_decode(AppToken); const isExpired = …

10 javascript  reactjs  typescript  next.js 

我正在从我的外部（node_modules）模式库中渲染组件。在主应用程序中，我将Link实例从实例传递react-router-dom到外部库的组件中，如下所示： import { Link } from 'react-router-dom'; import { Heading } from 'my-external-library'; const articleWithLinkProps = { url: `/article/${article.slug}`, routerLink: Link, }; <Heading withLinkProps={articleWithLinkProps} /> 在我的库中，它呈现Link为： const RouterLink = withLinkProps.routerLink; <RouterLink to={withLinkProps.url} > {props.children} </RouterLink> 在RouterLink似乎正确渲染，甚至在单击时浏览到的URL。 我的问题是，RouterLink似乎已与我的App react-router-dom实例分离。当我单击时Heading，它会“艰难”地导航，回发页面，而不是像Link往常那样无缝地路由到那里。 我不确定目前要尝试什么以使其无缝导航。任何帮助或建议，将不胜感激，在此先感谢您。 编辑：显示我的路由器的设置方式。 import React from 'react'; import { hydrate, unmountComponentAtNode } from …

10 javascript  reactjs  react-router-dom 

我正在尝试模仿其他移动聊天应用程序，在这些应用程序中，当您选择send-message文本框并打开虚拟键盘时，最底部的消息仍在显示中。似乎没有办法用CSS来做到这一点，所以JavaScript resize（显然是找出何时打开和关闭键盘的唯一方法）是事件和手动滚动以进行救援。 有人提供了这个解决方案，我发现了这个解决方案，两者似乎都可以工作。 除了一种情况。出于某种原因，如果您位于MOBILE_KEYBOARD_HEIGHT消息div底部（在我的情况下为250像素）以内，则当您关闭移动键盘时，会发生一些奇怪的情况。使用前一种解决方案，它会滚动到底部。使用后一种解决方案时，它会MOBILE_KEYBOARD_HEIGHT从底部向上滚动像素。 如果滚动到该高度以上，则上面提供的两个解决方案都可以正常工作。只有当您接近底部时，他们才会遇到这个小问题。 我以为可能只是我的程序导致了一些奇怪的流浪代码，但不，我什至重现了一个小提琴，它确实有这个问题。我很抱歉使调试变得如此困难，但是如果您在手机上访问https://jsfiddle.net/t596hy8d/6/show（显示后缀提供全屏模式），您应该可以看到同样的行为。 如果您向上滚动足够，打开和关闭键盘将保持该位置。但是，如果将键盘关闭在MOBILE_KEYBOARD_HEIGHT底部像素以内，则会发现它滚动到底部。 是什么原因造成的？ 这里的代码复制： window.onload = function(e){ document.querySelector(".messages").scrollTop = 10000; bottomScroller(document.querySelector(".messages")); } function bottomScroller(scroller) { let scrollBottom = scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight; scroller.addEventListener('scroll', () => { scrollBottom = scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight; }); window.addEventListener('resize', () => { scroller.scrollTop = scroller.scrollHeight - scrollBottom - …

10 javascript  android  html  css  reactjs 

如果图像背景不透明，我想检查图像的透明度并显示一条错误消息。我必须function hasAlpha(file)检查文件是否具有透明背景，但是我不确定如何通过function uploadFile(file)已经检查文件大小的函数将其传递。 我想我可以在其中复制文件大小if声明，if (xhr.upload) {}并检查上传的图像是否透明，但是我不确定如何将其function hasAlpha(file)与其余代码合并。 // File Upload // function ekUpload() { function Init() { console.log("Upload Initialised"); var fileSelect = document.getElementById("file-upload"), fileDrag = document.getElementById("file-drag"), submitButton = document.getElementById("submit-button"); fileSelect.addEventListener("change", fileSelectHandler, false); // Is XHR2 available? var xhr = new XMLHttpRequest(); if (xhr.upload) { // File Drop fileDrag.addEventListener("dragover", fileDragHover, false); …

10 javascript 

昨天我问了一个类似的问题，但解释得很差，并且没有说明我对纯CSS解决方案的渴望，我认为这应该是可能的，因此我正在尝试。 基本上，我遇到了一个问题，即我有一个可滚动消息div，并且在其下方有一个输入字段。当我单击一个按钮时，我希望输入字段增加100像素，而消息区域也不滚动。 这是一个小提琴，充分展示了问题所在 如您所见，当您单击“添加边距”按钮时，消息div也将向上滚动。我希望它能保持原样。同样，如果您稍微向上滚动，因此只能看到倒数第二条消息，则单击按钮时应类似地保持该位置。 有趣的是，这种行为“有时”得以保留。例如，在某些情况下（我无法完全推断），滚动位置得以保留。我只希望它始终如一。 window.onload = function(e) { document.querySelector(".messages").scrollTop = 10000; }; function test() { document.querySelector(".send-message").classList.toggle("some-margin"); } .container { width: 400px; height: 300px; border: 1px solid #333; display: flex; flex-direction: column; } .messages { overflow-y: auto; height: 100%; } .send-message { width: 100%; display: flex; flex-direction: column; } .some-margin …

10 javascript  html  css  scroll  scrollbar 

当试图从选择中删除选项时，总是剩下一个，为什么？ <select id="form-select"> <option>111</option> <option>222</option> <option>333</option> </select> 此JS无法正常工作： var t = document.querySelector('#form-select'); for(var i of t.options) { t.remove(i.index) } 而且这也不起作用： for(var i of document.querySelector('#form-select').options) { i.remove() } 我知道还有其他解决方案可以实现这一目标，但是我想了解为什么它无法正常运行

10 javascript 

我试图弄清楚如何在React应用程序中显示Firestore时间戳。 我有一个Firestore文档，其中的字段名为createdAt。 我正在尝试将其包含在输出列表中（在此处提取相关位，以便您不必通读整个字段列表）。 componentDidMount() { this.setState({ loading: true }); this.unsubscribe = this.props.firebase .users() .onSnapshot(snapshot => { let users = []; snapshot.forEach(doc => users.push({ ...doc.data(), uid: doc.id }), ); this.setState({ users, loading: false, }); }); } componentWillUnmount() { this.unsubscribe(); } render() { const { users, loading } = this.state; return ( …

10 javascript  reactjs  firebase  google-cloud-firestore  unix-timestamp 

使用一个的原因 (0, foo.fn)(); 是削减绑定：this不再绑定到foo而是将绑定到全局对象。 但是，为什么任何JavaScript代码（或Google的JS代码）想要削减绑定的原因是什么？（是否是反模式？）

10 javascript 

我有两个使用这些版本的Angular项目： 9.0.0-下一个6 8.1.0 在版本9中，我使用它来提供和注入window对象： @NgModule({ providers: [ { provide: Window, useValue: window }, ] }) export class TestComponent implements OnInit { constructor(@Inject(Window) private window: Window) } 哪个工作正常。 将这种方法用于版本8会在编译期间引发警告和错误： 警告：无法解析TestComponent的所有参数…… 我通过使用单引号解决了它，如下所示： @NgModule({ providers: [ { provide: 'Window', useValue: window }, ] }) export class TestComponent implements OnInit { constructor(@Inject('Window') private window: …

10 javascript  angular  typescript  dependency-injection  angular8 

问题背景：我正在使用katex在页面上渲染一些数学。然后，我想创建该页面一部分的PDF版本，因此我创建了一个HTML文档，其中包含要导出的部分，该部分内联所有CSS并将其传递给渲染器。渲染器无法访问节点资源，这就是内联所有内容的原因。除字体外，它运行完美。 我同时尝试了url-loader和bas64-inline-loader，但未内联生成的字体。我在调试器中检查了生成的CSS，并且旧的URL仍然存在，没有字体的data-URL。 这是我当前的webpack.config.js： const path = require('path'); const {CleanWebpackPlugin} = require('clean-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode: 'development', entry: { "editor": './src/editor.js', "editor.worker": 'monaco-editor/esm/vs/editor/editor.worker.js', "json.worker": 'monaco-editor/esm/vs/language/json/json.worker', "css.worker": 'monaco-editor/esm/vs/language/css/css.worker', "html.worker": 'monaco-editor/esm/vs/language/html/html.worker', "ts.worker": 'monaco-editor/esm/vs/language/typescript/ts.worker', }, output: { globalObject: 'self', filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { …

10 javascript  css  webpack  data-uri 

未捕获的TypeError：t.rgb不是函数 我创建了一个有角度的应用程序，并将其构建，并尝试为其提供服务 $ ng serve --prod --aot 这导致控制台中出现以下错误 Uncaught TypeError: t.rgb is not a function at HO (color.js.pre-build-optimizer.js:227) at GO (color.js.pre-build-optimizer.js:232) at rgb.js.pre-build-optimizer.js:36 at RH (ramp.js.pre-build-optimizer.js:4) at Module.zUnb (BrBG.js.pre-build-optimizer.js:16) at f (bootstrap:78) at Object.0 (index.js.pre-build-optimizer.js:26) at f (bootstrap:78) at t (bootstrap:45) at Array.r [as push] (bootstrap:32) 该应用程序不显示 当我在不缩小（--prod标记）的情况下构建应用程序时，它将起作用。 我仅在使用D3时看到此问题 D3 …

10 javascript  angular  d3.js