1

我正在使用我的流星应用程序做出反应,我需要将与项目列表集成。

有 aItemList.jsx和 aItemRow.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 react,ItemList但我希望能够先拖放重新排序,因此非常感谢任何帮助我走上正轨的帮助!

4

0 回答 0