如何使用martyjs容器?

时间:2015-04-16 11:34:51

标签: reactjs flux martyjs

我刚刚开始使用martyjs,我面临的问题是我无法从marty组件容器中呈现React组件。商店似乎有效,但商店更改后martyjs组件容器不会更改。我需要一些关于应该在console.log中编写的内容的指导,以使此代码有效。

这是我目前的代码:

var CardStore = Marty.createStore({
id: "CardStore",
handlers: {
    change: AppConstants.CARD_CHANGE,
    ratingReceive: AppConstants.RATING_RECEIVE
},
getInitialState: function () {
    return { pid: '', card:{pid:''}};
},

get: function(){
    console.log('GET', this.state);
    return this.state;
},

change: function (pid) {
    console.log("STORE FETCH- WORKED", pid);
    this.state.pid = pid;
    return this.fetch({
        id: pid,
        remotely: function () {
            return RatingHttpAPI.get(pid);
        }
    });
},

ratingReceive: function (rating) {
    .....
    this.hasChanged();
    console.log("STORE CHANGES - WORKED", rating.pid);
}

});

var RatingHttpAPI = Marty.createStateSource({
type: "http",
id: "RatingHttpAPI",

get: function (pid) {
    console.log("API GET", pid);
    return this.post({url: res.url.rating.list, body: Model.addAntiForgery({pid: pid})})
        .then(function (response) {
            console.log("API RECEIVE -WORKED", pid);
            CardActionCreators.ratingReceive(response.body);
        });
},


});


var CardActionCreators = Marty.createActionCreators({
id: "CardActionCreators",
change: function (pid) {
    this.dispatch(AppConstants.CARD_CHANGE, pid);
},
ratingReceive: function(rating){
    this.dispatch(AppConstants.RATING_RECEIVE, rating);
}
});


var Row2RightCol = React.createClass({
render: function () {
    var props = this.props;
    console.log("RENDER-FIRED ONCE ON LOAD",props);
    return (
        <div>
            <p>{props.pid}</p>
        </div>
    );
}
});
Marty.createContainer(Row2RightCol, {
listenTo: CardStore,
fetch() {
    console.log("CONTAINER FETCH-NOT FIRED");
    return {
        card: CardStore.for(this).get()
    }
}
});

$(document).ready(function () {
    React.render(<Row2RightCol/>, $("#card .row:eq(1) .col-right")[0]);
});

在这个问题上需要澄清一下。

2 个答案:

答案 0 :(得分:0)

Haven没有使用Marty,但是Marty.createContainer()返回一个新的React组件,它包装了你的Row2RightCol组件并添加了绑定。您应保存Marty.createContainer()的返回值并使用该值而不是直接使用Row2RightCol

答案 1 :(得分:0)

检查Flux比较报告https://github.com/voronianski/flux-comparison它有Marty.js示例。