小编Fai*_*hid的帖子

我正在为我的网格使用以下HTML标记.

<section class="grid">
    <article class="grid-item width-2x height-2x">....</article>
    <article class="grid-item">....</article>
    <article class="grid-item">....</article>
    <article class="grid-item width-2x">....</article>
    <article class="grid-item height-2x">....</article>
    <article class="grid-item">....</article>
    <article class="grid-item">....</article>
    <article class="grid-item width-2x height-2x">....</article>
</section>

SCSS代码如下所示:

.grid {
    display: grid;
    grid-template-columns: repeat( 4, 1fr );
    grid-gap: 30px;
    align-items: start;

    .grid-item {
        &.height-2x {
            grid-row: span 2;
        }
        &.width-2x {
            grid-column: span 2;
        }
    }
}

由于我在我的工作流程中使用自动前缀,因此它会自动添加带有-ms前缀的所有相关属性.我可以通过检查元素确认.

现在,问题是此代码在Chrome,Firefox和Opera中运行良好,但是当我在Microsoft Edge或IE 11中打开此页面时,所有网格项在第一个单元格处相互重叠.根据这个站点,这些浏览器支持带有-ms前缀的CSS Grid布局.我为这个场景创建了一个CodePen.

CodePen链接

为什么不起作用？

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[4];
  grid-template-columns: repeat(4, 1fr); …

在vue.js app中,使用vuex作为状态管理存储,我只需要在vuex中更改属性的值.为此我可以遵循两种方法:

1. 调度一个action方法,该方法将进一步提交mutation,最终将改变状态.

2. 第二种方法是mutation直接从组件提交,然后变异方法将改变状态.

目前,我正在使用这样的第一种方法:

在组件中:

this.$store.dispatch('updateNotice', 'This is some notice')

在行动中:

updateNotice ({state, getters, commit}, payload) { commit('UPDATE_NOTICE', payload) }

在突变中:

UPDATE_NOTICE (state, payload) { state.notice = payload }

您可能已经注意到,我使用该action方法只是提交单个突变,没有任何其他逻辑或异步功能.

我的问题是,在这种情况下,我是否应该直接从组件本身提交变异？什么是最佳做法？由于action在这个简单的情况下使用方法似乎很冗长,并没有特定的目的.

是否有任何理由我应该始终commit从组件中采取行动？毕竟,在vuex中...mapMutations()有一些理由存在.

希望你的人会好起来的.这是我的基本代码:

http://jsfiddle.net/kr9pY/7/

在这个演示中,你可以看到当我们将id悬停在id为"容器"的div上时,一个带有class ="nav"的div淡入.但问题是,这样做之后如果我将div悬停在div上,使用class ="nav"div淡出并再次淡出,如果我将光标稍微移动到.nav div中,它会重复重复此行为.当我们将鼠标悬停在此div中的.nav div或mover光标时,我不想这种行为.

谢谢,抱歉我的英语不好.

默认情况下，rails 在路径中查找布局视图文件views/layouts。但是，我想将其更改为app/themes/theme-name/layout.html.erb特定控制器。为此，我使用以下代码：

class ContentController < ApplicationController
  before_filter :set_theme

  def set_theme
    theme = "default"
    prepend_view_path "app/themes/#{theme}" # change default view path
    self.class.layout "../../themes/#{theme}/layout" # change default layout path
  end
end

但这段代码抛出以下错误：

Missing template layouts/../../themes/default/layout with {:locale=>[:en], :format .....

它仍在查找布局文件夹。我该如何解决这个问题。

我正在使用React Native 0.43.我有两个组件,名为ParentComponent和ChildComponent.我想将一些道具从父组件传递给子组件.我在父组件中使用以下代码(删节版本):

export default class ParentComponent extends Component {

  constructor(props) {
    super(props);

    this.state = {
      latitude: 34.7821,
    };
  }

  render() {
    return (
      <View>
        <ChildComponent latitude={this.state.latitude} />
      </View>
    );
  }

}

我的孩子组件如下:

export default class ChildComponent extends Component {

  constructor(props) {
    super(props);

    this.state = {
      latitude: props.latitude,
    };
  }

  componentWillMount() {
    console.log('Before Mount: ' + this.state.latitude)
  }

  render() {
    return (
        <Text>{'Mounted: ' + console.log(this.state.latitude)}</Text>
    );
  }
}

现在,我的控制台显示以下结果:

2:14:12 AM: Before Mount: null

2:14:12 …