我有一个名为的模型Collection.js,它看起来像这样:

module.exports = {
    attributes: {
        title: {
            type: 'string',
            required: true
        },
        description: {
            type: 'text',
            required: false
        },
        sessions: {
            collection: 'session',
            via: 'collection'
        }
    }
}

据我了解这个文件的消息,这是通过当一个新的模型实例被创建的套接字发送,可通过模型名称.

所以我在我的app.coffee文件中剪了这个:

socket = io.connect()

socket.on 'collection', ->
    console.log 'hey'

我已经验证了'环境'的工作原理,因为我收到了通知socket.on 'connect'. -> console.log 'hey',但我没有得到任何关于创建或存储记录的模型事件!

蓝图已激活.我需要改变什么？

更新

这里有一些代码,我想如何使用它:

$('document').ready ->
    noData = $('#list tr')
    socket.get '/collection', (res) ->
        createList(res)

因此,套接字应该订阅所有事件.

后来我想挂钩这个事件:

socket.on 'collection', (res) ->
    socket.get '/collection', (res) ->
        recreateList(res)

但是从未收到通知.

更新2

我的控制器 …

Capistrano在运行bundle命令时是否可以打印bundler的输出？

在本地机器上它通常打印"使用rails 4.2.1"等,我希望在部署到我的实时服务器时也能这样做.

不幸的是,我无法使用react-router版本4创建自定义路由.我正在尝试构建一个呈现组件的路由,如果用户已经过身份验证,或者在另一种情况下将用户重定向到登录组件.

我一直在使用这个文档页面开始.

const ProtectedRoute = ({component, ...rest}) => (
    <Route {...rest} render={props => false
        ? <Component {...props} />
        : <Redirect to={{pathname: '/login', state: {from: props.location}}}/>}
    />
);

我这样使用ProtectedRoute这个:

<ProtectedRoute exact path='/' component={testComponent}/>

当我运行它时,我得到以下运行时错误:

Uncaught ReferenceError: __rest is not defined
    at ProtectedRoute (index.tsx:19)
    at ReactCompositeComponent.js:305
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)
    at ReactCompositeComponentWrapper._constructComponentWithoutOwner (ReactCompositeComponent.js:304)
    at ReactCompositeComponentWrapper._constructComponent (ReactCompositeComponent.js:279)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:187)
    at Object.mountComponent (ReactReconciler.js:45)
    at ReactDOMComponent.mountChildren (ReactMultiChild.js:236)
    at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:703)
    at ReactDOMComponent.mountComponent (ReactDOMComponent.js:522)

这里有一些关于我正在使用的堆栈的更多信息:

• 反应15.6.1
• react-router-dom 4.2.2
• 打字稿2.5.2

为什么 …

无状态 React 组件应该以PascalCase命名，以便 React 可以区分原生元素和组件。Typescripts 命名约定规定我们应该使用lowerCamelCase 或UPPER_CASE 作为const 变量的名称。

我怎样才能同时满足（React 和 tslint）？

我尝试为我的React app设置Karma.我的堆栈看起来像这样:

• 因果报应
• 应对
• 的WebPack
• 打字稿

对于我的React应用程序,我需要一些自定义类型(src/typings.d.ts):

declare module '*.json' {
    const value: any;
    export default value;
}

//No definitions for redux-persist version 5. :(
declare module 'redux-persist';
declare module 'redux-persist/es/integration/react';
declare module 'redux-persist/es/storage';

我karma.conf.ts看起来像这样:

const karma = (config: any) => {
    config.set({
        basePath: '',
        browsers: ['ChromeHeadless'],
        frameworks: ['mocha'],
        files: ['test/actions/errorTests.ts'],
        preprocessors: {
            'test/actions/errorTests.ts': ['webpack']
        },

        webpack: {
            entry: ['./src/main.tsx'],

            resolve: {
                extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js']
            },

            module: {
                rules: [
                    {
                        test: /\.tsx?$/, …

我已经构建了一个公共路由组件，用于登录以在用户未通过身份验证时显示。每当未登录的用户单击受保护的路由时，他将被重定向到登录页面，他可以在其中输入凭据。我想要一种编程方式，以便如果他使用正确的凭据登录，他应该被重定向到他首先尝试访问的页面。例如，如果用户请求个人资料页面，他应该在登录后重定向到该页面，如果用户请求设置页面，也会发生同样的情况。

截至目前，我只能将它们重定向到 home path /。有什么方法可以使用重定向，以便它知道用户请求的路径？

这是我当前的公共路由组件代码

export const PublicRoute = ({
    isAuthenticated,
    component: Component,
    ...rest
}: PublicRouteProps) => (
    <Route
        {...rest}
        component={(props: any) => {
            console.log(props.path);
            return isAuthenticated.auth ? (
                <Redirect to='/' />
            ) : (
                <div>
                    <Component {...props} />
                </div>
            );
        }}
    />
);
const mapStateToProps = (state: ReduxStoreState) => ({
    isAuthenticated: state.isAuthenticated
});

export default connect(mapStateToProps)(PublicRoute);

我最近尝试将用 JavaScript 编写的 Webpack 配置迁移到 TypeScript。不幸的是我对此很挣扎。我已经为 webpack 编写了一个最小的配置文件来启动，因此缺少一些部分。我的webpack.config.ts看起来像这样：

import webpack from "webpack";

const config: webpack.Configuration = {
    entry: {
        bookmarklet: 'bookmarklet.ts'
    },
    output: {
        filename: '[name].js',
        path: __dirname + '/dist'
    }
}

export default config;

我有一个tsconfig.json其中包含：

{
    "compilerOptions": {
        "module": "ESNext",
        "target": "ES6",
        "lib": ["ES6", "dom"],
        "strict": true,
        "isolatedModules": true,
        "esModuleInterop": true,
        "moduleResolution": "Node",
        "skipLibCheck": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "removeComments": false
    }
}

其中package.json包含：

{
  "name": "bookmarklets",
  "version": "0.0.1",
  "description": "A collection of …

我正在尝试在我的 Storybook 中使用 docs 插件。我已经按如下方式配置了我的故事书：

module.exports = {
  stories: [
    '../src/**/*.stories.([tj]sx|mdx)',
    '../docs/**/*.([tj]sx|mdx)'
  ],
  addons: [
    '@storybook/preset-typescript', 
    '@storybook/addon-actions/register', 
    '@storybook/addon-storysource', 
    '@storybook/addon-docs'
  ],
  webpackFinal: async config => {
    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      loader: require.resolve('babel-loader'),
      options: {
        presets: [['react-app', { flow: false, typescript: true }]],
      },
    });
    config.resolve.extensions.push('.ts', '.tsx');
    return config;
  },
};

我创建了以下文件docs/welcome.mdx：

import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';

<Meta title="Welcome" />

Test

故事书成功构建，但对于任何组件都显示以下错误：

Unexpected default export without title: undefined

loadStories/</<@http://localhost:6006/vendors~main.7a0ff0b8bf0e3413b462.bundle.js:20821:17
loadStories/<@http://localhost:6006/vendors~main.7a0ff0b8bf0e3413b462.bundle.js:20814:13
render@http://localhost:6006/vendors~main.7a0ff0b8bf0e3413b462.bundle.js:11229:13
ConfigApi/this.configure@http://localhost:6006/vendors~main.7a0ff0b8bf0e3413b462.bundle.js:11264:9
configure@http://localhost:6006/vendors~main.7a0ff0b8bf0e3413b462.bundle.js:20921:15
configure@http://localhost:6006/vendors~main.7a0ff0b8bf0e3413b462.bundle.js:21366:24
./.storybook/generated-entry.js/<@http://localhost:6006/main.7a0ff0b8bf0e3413b462.bundle.js:16:67
./.storybook/generated-entry.js@http://localhost:6006/main.7a0ff0b8bf0e3413b462.bundle.js:17:30
__webpack_require__@http://localhost:6006/runtime~main.7a0ff0b8bf0e3413b462.bundle.js:785:30
hotApply@http://localhost:6006/runtime~main.7a0ff0b8bf0e3413b462.bundle.js:709:33 …

我正在玩Angular的（版本7）内容投影。据我所知，可以按属性，类和带有select属性的标签进行选择<ng-content>。

我也尝试通过ID选择：

<ng-content select="#myID"></ng-content>

从：

<mycomponent>
   <div id="myid">
        Test
   </div>
</mycomponent>

但这似乎不起作用。

为什么选择ID无效？

除了其他声明之外，我还在文件中声明了以下模块./src/types.d.ts：

/// <reference types="@emotion/react/types/css-prop" />
import '@emotion/react';
import { PureComponent, SVGProps } from 'react';

declare module '*.svg' {
  export class ReactComponent extends PureComponent<SVGProps<SVGSVGElement>> {}
}
declare module '*.ttf';
declare module '*.eot';
declare module '*.woff';
declare module '*.woff2';

当我运行tsc --noEmit像这样的错误时...

src/fonts/fonts.ts:39:31 - error TS2307: Cannot find module './pt-sans-v12-latin-ext_latin-regular.woff' or its corresponding type declarations.

39 import PTSansregularWOFF from './pt-sans-v12-latin-ext_latin-regular.woff';
                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/fonts/fonts.ts:40:32 - error TS2307: Cannot find module './pt-sans-v12-latin-ext_latin-regular.woff2' or its corresponding type declarations.

40 import PTSansregularWOFF2 from './pt-sans-v12-latin-ext_latin-regular.woff2'; …