如何使用 martyjs 容器？

Question

我刚开始使用 martyjs，我面临的问题是我无法从 Marty 组件容器中渲染 React 组件。 Store 似乎可以工作，但是 martyjs 组件容器在 Store 更改后不会更改。我需要一些关于应该在 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]);
});

这里需要澄清一下这个问题。

Answer 1

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

Answer 2

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

如何使用 martyjs 容器？

How to work with martyjs container?

reactjs

flux

martyjs