如何获取 Famo.us 可拖动修改器的渲染节点

Question

我正在尝试在“结束”事件上获取可拖动修饰符的父渲染节点，是否有任何 api 来获取可拖动所属的渲染节点？我的代码如下：

/*globals define*/
define(function(require, exports, module) {
    var View = require('famous/core/View');
    var Surface = require('famous/core/Surface');
    var Transform = require('famous/core/Transform');
    var StateModifier = require('famous/modifiers/StateModifier');

  var Draggable = require("famous/modifiers/Draggable");
   var RenderNode = require('famous/core/RenderNode');

    /*
     * @name DragTest
     * @constructor
     * @description
     */

    function DragTest() {
        View.apply(this, arguments);
        _createDragSurface.call(this);
    }

    DragTest.prototype = Object.create(View.prototype);
    DragTest.prototype.constructor = DragTest;

    DragTest.DEFAULT_OPTIONS = {
    };

   function _createDragSurface(){
  var yOffset=0;
  for(var i=0;i<2;i++){

     var draggable = new Draggable({
        xRange: [-220,0],
        yRange: [0,0]
    });

    var dragSurface= new  Surface({
       content:'this is a drag surface',
       size:[150,150],
      properties:{
         marginLeft: '10px',
         backgroundColor:'grey'
      }

     });
    var dragSurfaceModifier= new StateModifier({
      align:[0.5,yOffset]
     });
    yOffset+=0.3;
dragSurface.pipe(draggable);
    draggable.on('end',function(e){

       this.setPosition([0,0,0], {
        method: 'snap',
        period: 300
        });
   });

    var nodePlayer = new RenderNode(draggable);
    nodePlayer.add(dragSurfaceModifier).add(dragSurface);

    this.add(nodePlayer);
  }

   }
    module.exports = DragTest;
});

在向左拖动表面时，一旦达到阈值，我想删除 renderNode 即，

draggable.on('end',function(e){

      if(e.position[0]<-50){
        renderNode.remove()//how to achieve this part of the code as I dont have an access  to nodePlayer renderNode here.
       }
       else{
           this.setPosition([0,0,0], {
            method: 'snap',
            period: 300
            });
         }
       });

如果我只是使用 renderNode 的名称，即 nodePlayer，无论拖动哪个表面，它都会删除最后一个表面。非常感谢对此的任何输入。

最好的问候。

Answer 1

有很多方法可以完成您想做的事情。

由于您在可拖动对象上使用end 事件并使用自定义事件中的position 值，让我们将引用绑定到所需的项目以便能够访问它们。

RenderNode 上没有 .remove() 方法，因此该示例显示了一种可以使用 RenderController 从视图中删除节点的方法。

记住：不需要从 DOM 中删除节点。 Famo.us 将管理渲染树中的可渲染对象。

define('main', function(require, exports, module) {
  var Engine = require('famous/core/Engine');
  var Surface = require('famous/core/Surface');
  var Transform = require('famous/core/Transform');
  var Modifier = require('famous/core/Modifier');
  var StateModifier = require('famous/modifiers/StateModifier');
  var Draggable = require('famous/modifiers/Draggable');
  var TransitionableTransform = require('famous/transitions/TransitionableTransform');
  var DragTest = require('DragTest');

  var mainContext = Engine.createContext();

  var dragTest = new DragTest();
  mainContext.add(dragTest);

  dragTest.on('removed', function(e) {
    console.log('removed ', e.removedNode);
  });

});
define('DragTest', function(require, exports, module) {
  var View = require('famous/core/View');
  var Surface = require('famous/core/Surface');
  var Transform = require('famous/core/Transform');
  var StateModifier = require('famous/modifiers/StateModifier');

  var Draggable = require("famous/modifiers/Draggable");
  var RenderNode = require('famous/core/RenderNode');
  var RenderController = require('famous/views/RenderController');

  /*
   * @name DragTest
   * @constructor
   * @description
   */

  function DragTest() {
    View.apply(this, arguments);
    _createDragSurface.call(this);
  }

  DragTest.prototype = Object.create(View.prototype);
  DragTest.prototype.constructor = DragTest;

  DragTest.DEFAULT_OPTIONS = {};

  function _endingDrag(e) {
    console.log('end position', e.position, this);
    if (e.position[0] < -180) {
      this.renderController.hide(this.nodePlayer, function() {
        this.surface.emit('removed', {
          removedNode: this.nodePlayer
        });
      }.bind(this));
    } else {
      this.draggable.setPosition([0, 0, 0], {
        duration: 300
      });
    }
  }

  function _updatingDrag(e) {
    console.log('update position', e.position);
    this.surface.setContent('Position ' + e.position);
  }


  function _createDragSurface() {
    var yOffset = 0;
    for (var i = 0; i < 2; i++) {


      var dragSurface = new Surface({
        content: 'this is a drag surface',
        size: [150, 150],
        properties: {
          marginLeft: '10px',
          backgroundColor: 'grey'
        }

      });
      var dragSurfaceModifier = new StateModifier({
        origin: [0, 0],
        align: [0.5, yOffset]
      });
      yOffset += 0.3;

      var draggable = new Draggable({
        xRange: [-220, 0],
        yRange: [0, 0]
      });

      var renderController = new RenderController();
      this.add(renderController);

      var nodePlayer = new RenderNode();
      nodePlayer.add(dragSurfaceModifier).add(draggable).add(dragSurface);
      renderController.show(nodePlayer)

      draggable.on('end', _endingDrag.bind({
        draggable: draggable,
        renderController: renderController,
        nodePlayer: nodePlayer,
        surface: dragSurface
      }));
      draggable.on('update', _updatingDrag.bind({
        surface: dragSurface
      }));

      draggable.subscribe(dragSurface);
      dragSurface.pipe(this._eventOutput); // so we can emit a custom removed event to this widget

    }

  }
  module.exports = DragTest;
});

require(['main']);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://requirejs.org/docs/release/2.1.16/minified/require.js"></script>
<script src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<script src="http://code.famo.us/lib/classList.js"></script>
<script src="http://code.famo.us/lib/functionPrototypeBind.js"></script>

<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.5/famous.css" />

<script src="http://code.famo.us/famous/0.3.5/famous.min.js"></script>