react + backbone + react-router，提取模型

我在我的應用中使用了react和backbone模型。爲了彼此溝通，我使用更高階的組件（https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750）。react + backbone + react-router，提取模型

讓說我有一個骨架模型：

class Item extends Backbone.Model { 
    defaults() { 
    return { 
     id: null, 
     name: 'item', 
     subItems: [], 
     link: null 
    }; 
    } 

    // This is sample API response to GET /item/1 
    { 
    id: 1, 
    name: 'item1', 
    link: '/item/1', 
    subItems: [{ 
     id: 2, 
     name: 'item2', 
     link: '/item/2', 
     subItems: [] 
    }, { 
     id: 3, 
     name: 'item3', 
     link: '/item/3', 
     subItems: [] 
    }] 
    } 

    // This is sample API response to GET /item/2 
    { 
    id: 2, 
    name: 'item2', 
    link: '/item/2', 
    subItems: [] 
    } 
}

和反應成分：

class ItemComponent extends React.Component { 
    constructor(props, context) { 
    super(props, context); 
    } 

    onClickLink(link, e) { 
    e.preventDefault(); 
    this.context.router.transitionTo(link); 
    } 

    render() { 
    const itemData = this.props.data.toJSON(); 
    const itemNodes = itemData.map(function(item) { 
     return (
     <li><a href='' onClick={this.onClickLink.bind(this, item.link)}>{item.name}</a></li> 
    ); 
    }); 

    return (
     <div> 
     <span>{itemData.name}</span> 
     <ul>{itemNodes}</ul> 
     </div> 
    ); 
    } 
} 

ItemComponent.contextTypes = { 
    router: React.PropTypes.func.isRequired 
};

，我有我的高階組件

const item = new Item(); 
const NewComponent = connectToModel(ItemComponent, item);

其中

function connectToModel(Component, model) { 
    class ComponentConnection extends React.Component { 
    constructor(props, context) { 
     super(props, context); 
     this.state = { 
     data: model 
     }; 
    } 

    componentDidMount() { 
     model.on('add remove change', this.onModelChange.bind(this)); 
    } 

    componentWillUnmount() { 
     model.off(null, null, this.onModelChange.bind(this)); 
    } 

    onModelChange() { 
     this.setState({ 
     data: model 
     }); 
    } 

    render() { 
     return (
     <Component 
      {...this.state} 
      {...this.props} 
     /> 
    ); 
    } 
    } 
}

條

我的路線：

const Routes = (
    <Route handler={App} path="/"> 
     <Route name="item" path="item/:id" handler={Item} /> 
    </Route> 
);

我的問題：

我如何可以調用API，當用戶請求的URL /item/1所以不是const item = new Item();我會打電話像const item = new Item({id: 1});渲染之前獲取數據。
當一個子項目用戶點擊，反應路由器將讓他e.g /item/2，但再怎麼我可以告訴我的反應組件，該航線PARAM也因此改變獲取新的模式覆蓋我目前的一個並呈現新的數據。

來源

2015-08-14 DeBoer

我不是100％肯定它會如何與賣場工作，但我一直在做的方式是使用組件的靜說哪些API需要被調用，然後獲取該數據在路線實際呈現組件之前將結果數據作爲道具傳遞給它。因爲每個轉換都會啓動路由器，所以只要您的API基於查詢或參數中的數據，它就會始終獲取相關數據。

本回購協議對我幫助我起步非常重要... Mega React Router Demo

來源

2015-08-25 13:02:59

react + backbone + react-router，提取模型

回答

相關問題