小编Uto*_*pik的帖子

在Redux中实现undo/redo

背景

有一段时间,我一直在讨论如何在Redux中使用服务器交互(通过ajax)实现undo/redo .

我已经提出了一个使用命令模式的解决方案,其中操作使用executeundo方法作为命令注册,而不是调度操作您调度命令.然后将命令存储在堆栈中并在需要时引发新操作.

我当前的实现使用中间件拦截调度,测试命令和调用Command的方法,看起来像这样:

中间件

let commands = [];
function undoMiddleware({ dispatch, getState }) {
  return function (next) {
    return function (action) {
      if (action instanceof Command) {
        // Execute the command
        const promise = action.execute(action.value);
        commands.push(action);
        return promise(dispatch, getState);
      } else {
        if (action.type === UNDO) {
            // Call the previous commands undo method
            const command = commands.pop();
            const promise = command.undo(command.value);
            return promise(dispatch, getState);
        } else {
            return next(action); …
Run Code Online (Sandbox Code Playgroud)

javascript undo-redo reactjs redux

15
推荐指数
1
解决办法
4413
查看次数

AngularJS ng-show中的动画

当它变得可见/隐藏时,我正试图让ng-show元素动画化.但它只是表现为普通的ng-show,instand show/hide.

我找到了这个例子:http://jsfiddle.net/Kx4TS/1/ ,它工作正常.

但是,如果我使用相同的ng-animate属性和相同的css,它在我的情况下不起作用.还有什么我需要做的或动画不起作用的情况?

我的代码看起来像这样:

   <div style="" ng-show="item.hasMax()" 
     class="box" ng-animate="{show: 'fadeIn', hide:'fadeOut'}">
Run Code Online (Sandbox Code Playgroud)

而css是:

    .fadeIn-setup,.fadeOut-setup {
          -webkit-transition: 1s linear opacity;
          -moz-transition: 1s linear opacity;
          -o-transition: 1s linear opacity;
          transition: 1s linear opacity;
        }
    .fadeIn-setup{
        opacity:0;
    }
    .fadeOut-setup{
        opacity:1;
    }
    .fadeIn-setup.fadeIn-start {
        opacity: 1;
    }
    .fadeOut-setup.fadeOut-start{
        opacity:0;
    }
Run Code Online (Sandbox Code Playgroud)

此外,是否有可能使ng-animate像jquery slideDown/slideUp动画那样做?

javascript angularjs ng-animate

6
推荐指数
1
解决办法
2万
查看次数

Select2 for AngularJS中的双向数据绑定不起作用

我在使用AngularJS中的Select2插件时遇到问题.我可以加载项目,并从我的ng模型中检索所选项目,但我有问题,如果我更新ng模型,下拉列表不会更新.

在我看来,代码如下所示:

<select ui-select2 data-placeholder="All" id="filtersSelect" ng-model="chosenFilterItem" ng-options="item.text for item in filterItems">
Run Code Online (Sandbox Code Playgroud)

在我的控制器中,我有以下代码,它检索项目并将其绑定到列表:

$scope.fetchFilters = function(){
        $http.get($scope.filtersUrl).then(function(result){
            $scope.filterItems = result.data;
            $scope.chosenFilterItem = result.data[3];
            if(!$scope.$$phase) {
                $scope.$apply();
            }
        });
    }
Run Code Online (Sandbox Code Playgroud)

如您所见,我只是尝试在下拉列表中设置第3项,但没有预先选择项目.还有另一种预选下拉项目的方法吗?

javascript angularjs jquery-select2

2
推荐指数
1
解决办法
1万
查看次数