小编ajm*_*jma的帖子

我在使用有角度的dragabilly时遇到了一个小问题,问题很奇怪,因为它一直有效,直到我对如何加载使用packery的内容进行了一些更改,特别是添加了嵌套重复的级别.当我这样做时,packery仍然正确运行,但它似乎只能在第一个对象上运行.

HTML看起来像 -

 <div class="item gs-w" ng-class="widget.size" ng-repeat="widget in contentHere" packery-angular >
    <!-- nested repeat -->
    <div ng-repeat="side in widget.sides" ng-show="side.active">

所以它只是一个嵌套的重复,其中packery运行外部项目,并且再次,packery元素工作正常.当我在嵌套重复中添加它时,它会破坏 - 这些对象有多个面,我隐藏在那边.你看到那里的内容,但是拖动句柄在嵌套重复内部,我认为这可能是问题,或者嵌套是加载时间稍长,并且无法及时识别手柄？我不太确定,这就是我可以使用某个方向的地方.

这是指令 - http://jsfiddle.net/yq4zwLzs/.我添加的唯一内容是移动UA检查尝试在移动设备上关闭可拖动性,因为在那时它是不必要的.我试过把它取下来它似乎没有任何影响.

这是它的一个实际的吸收者 -

http://plnkr.co/edit/HSVztH3vlf5VI1lf1tFR?p=preview

原谅丑陋 - 但如果你看,你可以移动顶部项目,但不是底部项目.这就是我被困住的地方,我似乎无法弄清楚这是怎么发生的.您可以通过.handle(标题元素)拖动项目.我会感激任何帮助,因为我似乎被困在这里.

谢谢阅读!

更新

即使我把.handle放在内部重复之外,它仍然有同样的问题.也许它与内部重复和角度包装运行的顺序有关？

更新2

看起来拖动句柄逻辑根本不起作用,你可以拖动任何东西,而不仅仅是.handle

更新3

我几乎可以肯定这与嵌套的ng-repeat有关(也许它与指令在对象上运行的方式相互作用),因为无论我尝试什么,只要我有嵌套重复,我都有相同的问题.如果我把它拉下来就会恢复正常工作,但如果没有它我很难实现我想要的目标:(.

另外 - 如果我转

var draggable2 = new Draggabilly(element[0], {handle: '.handle'} );

成

var draggable2 = new Draggabilly(element[0] );

它工作正常.我需要一个拖动手柄,因为这些div中的内容将与用户进行交互,我不希望div在它们内部点击时四处移动.也许如果有一种方法可以稍后启动dragabilly？

我有一堆选择列表,我正在尝试为它们添加"无"和标题选项.代码如下:

<select ng-options="value.name for value in values" ng-model="selection">
    <option value="" disabled>{{title}}</option>
    <option value="">None</option>
</select>

目前,我无法将它们添加到数据中,所以我试图找到一种方法来实现这一点.当我第一次加载它们时,"none"选项不存在.标题在那里并按预期工作,但似乎我无法在此选择列表中添加两个空白条目.

最简单的方法是将"无"选项添加到数据中,但对我来说不可能.有没有正确的方法来实现我想要的？

这里有一个奇怪的问题 - 所以我会尽可能清楚地解释这个问题.

我有一个简单的ng-repeat,它将根据.active设置为true的键值来显示内容.我让用户滚动浏览内容,其中一些箭头按钮绑定到某些ng-clicks.这很好用,但是我想从数组中排除一个项目,如果它附加了side ='help'的键值.所以基本上我希望箭头点击在某种意义上跳过它.不幸的是,我无法控制数组中的帮助项目.这是点击功能

//flip right
$scope.flipRight = function(index, parent){
    var idx = index + 1;
    if (idx >= $scope.contentHere[parent].sides.length) {
       idx = 0;
    }
    $scope.contentHere[parent].sides[index].active = false;
    $scope.contentHere[parent].sides[idx].active = true;
};
//flip left
$scope.flipLeft = function(index, parent){
    var idx = index - 1;
    if (idx < 0) {
     idx = $scope.contentHere[parent].sides.length - 1;
    }
    $scope.contentHere[parent].sides[index].active = false;
    $scope.contentHere[parent].sides[idx].active = true;
};

因此,基本上我试图想象的是如果它有.side ='help',如何让这个逻辑跳过项目.我想过使用lodash来通过没有值的项来_filter数组,但是它将偏移索引,这样就无法工作了.我不知道如何处理这个问题(也许我正在考虑这个错误？),并且可以使用一些方向.

感谢您抽出宝贵时间阅读!

我正在编写一个react-redux应用程序,我正在使用superagent在我的中间件中进行一些服务调用.我发现了一个非常奇怪的行为,我对搜索API的第一次调用总是被终止.我已经尝试在第一次调用之前等待10-30秒,并记录整个过程中的每一步,我似乎无法确定为什么会发生这种情况.

我的动作创作者看起来像

export function getSearchResults(searchQuery) {
return {
        query: searchQuery,
        type: actions.GO_TO_SEARCH_RESULTS
    }
}

它击中了中间件逻辑:

var defaultURL = '/myServer/mySearch';

callPendingAction();

superagent.get(defaultURL)
        .query({query: action.query})
        .end(requestDone);


//sets state pending so we can use loading spinner
function callPendingAction() {
    action.middlewares.searchIRC.readyState = READY_STATES.PENDING;
    next(action);
}

//return error or response accordingly
function requestDone(err, response) {
    console.log("call error", err);
    const search = action.search;
    if (err) {
        search.readyState = READY_STATES.FAILURE;
        if (response) {
            search.error = response.err;
        } else if (err.message) {
            search.error = err.message;
        } else { …

我一直在修补一些关于使gridster.js响应的圆形方法的想法.我在gridster的github问题中发现了一个代码snippit,并意识到如果我在某个窗口大小调整下运行它并销毁并重新运行gridster我可以得到gridster响应responsivley的效果.让我告诉你我的意思 -

$(window).resize(function(){
            var width = $(window).width();
            var columns = "";

            if(Modernizr.mq('screen and (max-width:640px)')){
                columns = 1;
                gridster.destroy();
                var tooFar = $('.gridster .gs-w').filter(function () {
                  return $(this).data('col') > columns;
                });
                $(tooFar).each(function () {
                  $(this).attr('data-col', '1');    
                });

                var tooBig = $('.gridster li').filter(function () {
                  return $(this).data('sizex') > columns;
                });
                $(tooBig).each(function () {
                  $(this).attr('data-sizex', columns);

                });
                $(".gridster ul").gridster({
                    widget_base_dimensions: [300, 300],
                    widget_margins: [5, 5],  
                    max_cols: 1,
                      resize: {
                          enabled: true
                        },
                        draggable: {
                          handle: '.dragDiv'
                        },
                    serialize_params: function ($w, wgd) {              
                        return …

我试图确定我的不可变映射的某个部分是否包含某个键值， checked: true如果是，则在上层设置 checked: true 。我正在查看的对象看起来像这样：

const memo = {
  "Topics": {
    "filters": {
      "Psychological disorders": {
        "filters": {
          "Anxiety disorders": {
            "filters": {},
            "checked": true <-- check for this value at this level
          }
        }
      }
    },
    "isOpen": false
  }
}

注意：这些数据实际上是不可变的。

所以函数运行后会变成这样：

const memo = {
      "Topics": {
        "filters": {
          "Psychological disorders": {
            "checked": true, <-- check true added
            "filters": {
              "Anxiety disorders": {
                "filters": {},
                "checked": true 
              }
            }
          }
        },
        "isOpen": false
      }
    }

我现在唯一可以访问的变量是“主题”名称，所以我试图找出是否有任何主题 …

我在html/css中有一个小标题栏,右边有几个图标浮动.我希望它们保持在原位并且如果右侧区域太小,则将标题(在左侧)包裹在下方.现在,我的html看起来像这样(使用bootstrap):

 <div class="activity-panel-item--header">
     <div class="col-sm-8"><p>02 Development, LLC v. 607 South Park, LLC </p></div>
     <div class="col-sm-4"><span class="icon icon-trash-o pull-right"></span><span class="icon icon-cog2 pull-right"></span><span class="icon icon-pencil3 pull-right"></span></div>
</div>

所以我有一个col-sm-8和col-sm-4.从长远来看这不起作用,因为col-sm-4在某些尺寸上太小,所以我需要使用图标设置右侧列具有设置宽度(140px可以说).因此,如果在右侧设置最小宽度,则在较小尺寸上打破.

我想知道是否有一种方法让col-sm-8左侧的标题在响应时绕着右侧的设置宽度按钮移动(我基本上希望按钮保持在同一个位置全程).有点像右边的按钮是绝对位置但不是流出的,所以文本会对它作出反应.

这是一个小提琴我愚弄https://jsfiddle.net/DTcHh/24085/

编辑

因此,我通过以下操作即兴创建了一个解决方案: - 通过绝对定位并将其设置为一个集合,从dom流中取出正确的图标栏元素 - 向包含左侧和右侧的元素添加相同的宽度作为填充项目

然后,我可以一起消除col的全部.代码如下:

HTML:

  <div class="activity-panel-item col-md-12">
    <div class="activity-panel-item--header">

      <p>02 Development, LLC v. 607 South Park, LLC </p>
      <div class="activity-panel-item--header--iconbar">
        <span class="icon icon-trash-o pull-right">1</span><span class="icon icon-cog2 pull-right">2</span><span class="icon icon-pencil3 pull-right">3</span>
  </div>
    </div>
    <div class="activity-panel-item--body">
      <p>test 123345.</p>
      <h3></h3>
      <p>cases</p>
    </div>
  </div>

CSS:

.activity-panel-item {
  height: 100%; …

我正在尝试为我的应用程序设置路由器，并使基本/入口点正常工作（似乎）。似乎当我尝试开始添加子路由时，它正在中断。我现在有一个非常直接的设置。我正在使用 react + redux，我的渲染看起来像：

 ReactDOM.render(
<Provider store={store}>
     <Router history={browserHistory} >
        <Route path="/" component={comp1.Component}>
            <Route path="test" component={comp2.Component} />
        </Route>
    </Router>
</Provider>,
// eslint-disable-next-line no-undef
document.getElementById('app')
);

我在 localhost:8080 上运行 webpack 开发服务器，它可以毫无问题地提供第一条路由，但是当我转到 localhost:8080/test 时，我得到了一个Cannot GET /test.

这是我的 webpack 配置：

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'eval',
  entry: [
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server',
    './client/app.jsx'
  ],
  output: {
    path: path.join(__dirname, ''),
    filename: 'bundle.js',
    publicPath: '/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.optimize.DedupePlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    }),
    new …

我正在通过一些单选按钮构建一个小星级CSS评级,并使其正常工作.我有一个问题是能够在选择的收音机之前填写星星,所以如果选择星号3,星号1和2也会被填写.这是我到目前为止所拥有的:

#review-form input,
#review-form textarea {
  background: none repeat scroll 0 0 #333333;
  border: 0 none;
  color: #fff;
  margin: 0;
  max-width: 100%;
  padding: 7px 4px;
}
#review-form .radio {
  display: inline-block;
}
#review-form input[type=radio] {
  display: none;
}
#review-form input[type=radio] + label {
  display: block;
}
#review-form input[type='radio'] + label:before {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-right: 8px;
  width: 23px;
}
#review-form input[type=radio] + label:before {
  content: "\f006";  /* Radio Unchecked …

我想知道是否有办法使用变量来解析javascript中的对象.在我的功能中我在做什么这样的事情 -

mutateTaxon(data) {
    const { content } = data;
    const { plp } = content || {};
    ...

这工作正常,但我需要根据另一个因素扩展此功能,如果我需要使用data.content它(现在正在使用)或者可以改变data.collection.所以我有另一个节点data- 它改变了对呼叫的呼叫.我正在尝试这样的事情 -

mutateTaxon(data) {
    const match = lowerCase(data.taxonomy.name);
    const { match } = data;
    const { plp } = match || {};

匹配变量将评估内容或集合(如预期).但这似乎不起作用,也许这是不可能的？我想也许match需要评估var所以我尝试了类似的东西 -

const { [[match]] } = data;

这也不起作用.也许这是不可能的,或者我正在接近这个错误.我想知道,这样的事情可能吗？谢谢!