How to work with martyjs container?

Question

I just started to work with martyjs and the problem I am facing is I cant render React component from marty component container. The Store seemed to work, but martyjs component container does not change after the Store changes. I need some guidance here on what should be written in console.log to make this code work.

This is my current code :

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]);
});

Need some clarification here on this issue.

Answer 1

Haven't used Marty, but Marty.createContainer() returns a new React component which wraps your Row2RightCol component and adds bindings. You should save the return value of Marty.createContainer() and use that instead of using Row2RightCol directly.

Answer 2

Check Flux comparison repo https://github.com/voronianski/flux-comparison it has Marty.js example.