在Meteor应用程序中反应DnD

时间:2015-06-04 15:37:41

标签: javascript meteor drag-and-drop reactjs meteor-react

我正在使用我的meteor应用程序做出反应,我需要将this与项目列表进行整合。

有一个ItemList.jsx和一个ItemRow.jsx,因为该项目本身包含文字,链接,图片等。

ItemRow.jsx

    ItemRow = ReactMeteor.createClass({
        templateName: "ItemRow",

        propTypes: {
            item: React.PropTypes.object.isRequired,
            showPoolTitle: React.PropTypes.bool,
        },

        getInitialState: function() {
            return {
                editing: false,
                drop: this.props.item,
                pool: {},
            }
        },

        startMeteorSubscriptions: function() {
        Meteor.subscribe("ItemRow", this.props.item._id);
      },

        getMeteorState: function() {
        return {
          item: Items.findOne(this.props.item._id),
          pool: Pools.findOne(this.props.drop.poolId),
        };
      },

        toggleEditing: function() {
            this.setState({ editing: !this.state.editing });
        },

        render: function() {
            var content;
            if (this.state.editing) {
                content = <ItemRowEdit drop={this.state.item} done={this.toggleEditing}/>
            } else {
                content = <ItemRowShow pool={this.state.pool} item={this.state.item} edit={this.toggleEditing} showPoolTitle={this.props.showPoolTitle}/>
            }
            return (
                <div key={this.props.item._id} className="item">
                    {content}
                </div>
            )
        },

    });

ItemList.jsx

ItemList = ReactMeteor.createClass({
  templateName: "ItemList",

  propTypes: {
    items: React.PropTypes.object.isRequired
  },

  getInitialState: function() {
    return {
      items: this.props.items.fetch()
    }
  },

  render: function() {
    var items = this.state.items;

    return (
      <div className="ui very relaxed huge list">
        {items.map(function(item) {
          return ( <ItemRow item={item}/> );
        })}
      </div>
    );
  }

});

我现在还没有使用Meteor对ItemList的反应,但我希望能够先拖放重新排序,以便让我在正确的轨道上获得任何帮助非常感谢!

0 个答案:

没有答案