小编Mat*_*att的帖子

我使用Bootstrap 3和bootstrap网格布局,并希望渲染C3饼图,但C3饼图在列中不可见.如果我不使用引导网格布局,则图表可见.

的jsfiddle

HTML

<div class="row">
    <div class="col-md-6" id="fst-chart">
    </div>
    <div class="col-md-6" id="snd-chart">
    </div>
</div>

JavaScript的

var chart = c3.generate({
                bindto: '#snd-chart',
                size: {
                    width: 300
                    //height: 300
                },
                padding: {
                    top: 10,
                    left: 200
                },
                legend: {
                    position: 'right'
                },
                tooltip: {
                    format: {
                        value: function (value, ratio, id, index) { return "ratio: " + ratio + " value: " + value; }
                    }
                },
                data: {
                    // iris data from R
                    columns: [
                        ['data1', 30],
                        ['data2', …

我正在使用 Webpack 进行代码捆绑，并希望在 jQuery隐藏功能中使用缓动选项。

$('.comment').hide('slide', { direction: 'left' }, 1000);

我收到此错误消息：

Uncaught TypeError: jQuery.easing[this.easing] is not a function

包.json

...
"dependencies": {
    "@koa/cors": "^2.2.1",
    "axios": "^0.16.2",
    "bootstrap": "^3.3.7",
    "bootstrap-timepicker": "github:janzenz/bootstrap-timepicker#feature/compatibility-es6",
    "d3-ease": "^1.0.3",
    "d3-selection": "^1.1.0",
    "d3-shape": "^1.2.0",
    "d3-transition": "^1.1.0",
    "font-awesome": "^4.7.0",
    "http-server": "^0.10.0",
    "immutable": "^3.8.2",
    "jquery": "^3.2.1",
    "jquery-ui": "^1.12.1",
    "jquery.panzoom": "^3.2.2",
    "juration": "^0.1.0",
    "koa": "^2.3.0",
    "koa-body": "^2.5.0",
    "koa-bodyparser": "^4.2.0",
    "koa-logger": "^3.1.0",
    "koa-router": "^7.2.1",
    "koa-send": "^4.1.1",
    "koa-static": "^4.0.2",
    "moment": "^2.18.1",
    "oembed-auto": "0.0.3",
    "probe-image-size": "^3.1.0",
    "puppeteer": "^0.12.0",
    "react": "^15.6.1", …

在node.js中,我有一个数据库事务,我想async在then回调中调用一个方法,但是我收到错误消息the keyword 'await' is reserved.

这是异步saveImage功能:

const saveImage = async (parsedLink) => {
  AWS.config.region = config.awsSettings.region;
  AWS.config.accessKeyId = config.awsSettings.accessKeyId;
  AWS.config.secretAccessKey = config.awsSettings.secretAccessKey;
  const bucket = new AWS.S3({
    params: {
      Bucket: config.awsSettings.images_bucket_name,
    },
  });

  const currentDateString = new Date().toISOString().replace(/\:|\./g, '-');
  const bodystream = new Buffer(parsedLink.imgUrl, 'binary');
  const imageUrlDomain = parseDomain(parsedLink.linkUrl).domain;

  const params = {
    Key: `${parsedLink.id}/${imageUrlDomain}_${currentDateString}${parsedLink.imgType}`,
    ContentType: parsedLink.imageMime,
    ContentEncoding: 'base64',
    Body: bodystream,
  };

  const resultPromise = await bucket.upload(params).promise();
  return resultPromise.Location;
};

如果我想使用saveImage …

我想检查元素是否在Node.js的DOM中可见。我使用jsdom库获取DOM结构。有两种方法可以检查客户端javascript中元素的可见性，但是不适用于node.js中的jsdom。

1）即使对于可见元素，offsetParent属性也始终为null

2）dom.window.getComputedStyle(el).display返回block，但是元素的css规则是display: none

const request = require('request');
const jsdom = require("jsdom");
const { JSDOM } = jsdom;

request({ 'https://crooked.com/podcast-series/majority-54/', jar: true }, function (e, r, b) {
  const dom = new JSDOM(b);
  test(dom);
});

const test = (dom) => {
  const hiddenElement = dom.window.document.querySelector('.search-outer-lg');
  const visibleElement = dom.window.document.querySelector('.body-tag-inner');
  console.log(dom.window.getComputedStyle(hiddenElement).display); // block
  console.log(visibleElement.offsetParent); // null
}

是否有可能或另一种方式如何在node.js中检查DOM中元素的可见性？

我想知道页面完全加载时的窗口滚动位置。

当我点击带有 id 的链接时，页面会根据带有此 id 的元素加载。加载页面时，我想知道窗口位置。

索引.html

<a href="page.html#2012_8">link</a>

页面.html

<script>
$(window).load(function(){
    console.log($(window).scrollTop());
});
</script>

<p id="2012_8">This is some text in a paragraph.</p>

当我点击链接时，控制台日志得到 0。当我刷新 page.html 时，控制台日志得到正确的窗口滚动位置。为什么？谢谢你的帮助。

我在Spring MVC中开发了一个portlet,它部署在Liferay中.显然,我有一个portlet视图模式的渲染阶段的问题.

控制器用于查看模式

package graphui.controller;

import javax.portlet.ActionRequest;
import javax.portlet.ActionResponse;
import javax.portlet.RenderRequest;
import javax.portlet.RenderResponse;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.portlet.ModelAndView;
import org.springframework.web.portlet.bind.annotation.ActionMapping;
import org.springframework.web.portlet.bind.annotation.RenderMapping;

/**
 *
 * Controller for VIEW mode of portlet.
 */
@Controller("graphViewController")
@RequestMapping(value = "VIEW")
public class GraphViewController{

    @ActionMapping
    public void handleActionRequest(ActionRequest request, ActionResponse response)throws Exception {
        return;
    }

    @RenderMapping
    public ModelAndView handleRenderRequest(RenderRequest request, RenderResponse response, ModelMap model) {

      model.addAttribute("nodes", "123");
      model.addAttribute("edges", "123");
      return new ModelAndView("index", model);

    }

}

的index.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" …

我使用bootstrap 3和bootstrap-table.我想在这个例子中使用'tag'模式.

当我使用select2版本3.4.4(像在x可编辑的示例中)我的代码工作,但当我想使用最新版本4.0.0时,我的代码不起作用.

我收到错误消息:

未捕获错误:没有select2/compat/inputData

我试图用select2.full.js替换select2.js,但在这种情况下,可编辑框为空.

如何使可编辑单元格与最新版本的select2兼容？

HTML

    <table class="table table-striped table-bordered table-hover"  cellspacing="0" id="mainTable" data-click-to-select="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-pagination="true">
    <thead>
    <tr>
        <th data-field="name" data-editable="true">Name</th>
        <th data-field="stargazers_count" data-editable="true">Stars</th>
        <th data-field="forks_count" data-editable="true">Forks</th>
        <th data-field="description" data-editable="true">Description</th>
    </tr>
    </thead>
    <tbody>
        <tr><td>ala</td><td>ele</td><td class="tag" data-toggle="manual" data-type="select2" data-value="na, an, sd">na,an,sd</td><td>asd</td></tr>
        <tr><td>ala</td><td>ele</td><td class="tag">na,an,sd</td><td>asd</td></tr>
        <tr><td>ala</td><td>ele</td><td class="tag">na,an,sd</td><td>asd</td></tr>
    </tbody>
</table>

JavaScript的

$.fn.editable.defaults.mode = 'inline';

$('table').bootstrapTable({
    editable: true
});

console.log($('.tag'));

var tagCells = $('.tag');
$(tagCells).each(function() {
    var tags = …

我使用 aScrollView并且我无法将图标放在一个内部的Views 中。

    import Icon from 'react-native-vector-icons/MaterialCommunityIcons';

<ScrollView>
...
        <View style={styles.detailRowContainer}>
          <View style={{flex: 1}}>
            <Text style={styles.label} numberOfLines={1}>
              {'Phone Number'}
            </Text>
            <Text style={styles.value} numberOfLines={1}>
              {phone}
            </Text>
          </View>
          <View style={styles.round}>
            <TouchableWithoutFeedback onPress={this._onPressPhone}>
              <Icon size={22} name="phone" />
            </TouchableWithoutFeedback>
          </View>
        </View>;
...
</ScrollView>



        detailRowContainer: {
            flexDirection: 'row',
            justifyContent: 'center',
            flex: 1,
            marginTop: 10,
            paddingBottom: 10,
            borderBottomWidth: 1,
            borderBottomColor: Colors.lightGray,
        },
        label: {
            color: Colors.glofoxDark,
            marginBottom: 3,
        },
        value: {
            color: Colors.glofoxDark,
            fontWeight: '800',
            borderBottomWidth: 1,
            borderBottomColor: Colors.lightGray,
        },
        round: { …

我在 React 项目中使用Framer Motion作为动画库。我正在尝试使用when属性在子元素之后为父元素设置动画。它不起作用，因为ContentVariants和ImgVariants同时运行。

代码沙盒

import React, { Component } from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";
import { motion } from "framer-motion";

export const ContentVariants = {
  expanded: () => ({
    width: "150px",
    transition: {
      when: "afterChildren",
      duration: 2
    }
  }),
  collapsed: () => ({
    width: "50px",
    transition: {
      when: "afterChildren",
      duration: 2
    }
  })
};

export const Content = styled(motion.div)`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: …

我不确定这是否是react-leaflet-markercluster、react-leaflet、leaflet、react或我的代码的问题。

我有一张包含数千个标记的地图，我正在使用react-leaflet-markercluster 进行标记聚类。如果我需要更新 的全局状态MapComponent，则反映此更改时会有 1-3 秒的延迟。

我创建了一个包含 5000 个标记的codeandox，您可以看到有 2 个存在性能问题的用例：

1.)MapComponent位于react-reflex元素内部，允许调整面板大小并将新尺寸（宽度、高度）传播到MapComponent. 如果宽度和高度发生变化，mapRef.invalidateSize()则调用该函数来更新地图尺寸。调整大小非常慢。

2.) 如果用户单击Marker，则更新所选的全局状态。它是单击的标记 ID 的列表。地图调用fitBounds方法以关注单击的标记，并且标记图标也发生更改。大约有 1 秒的延迟。

在我的项目中，如果我需要更改MapComponent状态，则在开发模式下需要 2-3 秒才能反映更改，并且它只是MapComponent及其元素（标记）的一次重新渲染。

我查看了 Chrome 性能概况，似乎大部分时间都花在内部 React 方法上。

可以通过使用 防止重新渲染来解决此问题memo，这与 类似shouldComponentUpdate，但它使整个代码库过于复杂。preferCanvas选项不会改变任何东西。我想知道解决这些问题的好方法是什么。