I'm having a dust helper called {@component id="compId" path="path/to/react/component"}.
About React component: The react component makes an ajax call in componentWillMount and calls forceUpdate. psueodcode:
React.createClass(){
getInitialState : function() {
this.setState({response : "nothing"});
}
var response = "nothing";
componenetWillMount : function(){
//1.performs ajax call
//2.set state in ajax callback this.setState({response : "success"});
//3. calls this.forceUpdate()
},
render : function() {
//returns response text
}
}About Dust Helper component is added to dust helper and chunk is written with response from react.
dust.helpers.component = function(chunk, context, bodies, param) {
return chunk.map(function(chunk) {
var domElement = document.getElementById(param.id);
if (!domElement) {
console.log("Document does not present for " + param.id);
domElement = document.createElement(param.id);
}
require([param.path], function(widgetModule) {
console.log("Rendering " + param.path);
var widget = React.createFactory(widgetModule);
React.render(widget(null), domElement, function() {
chunk.end(domElement.innerHTML);
});
});
});
};Response In Browser:
I'm able to see the response as "nothing" instead of "success". The issue is The render callback is called after the template is rendered on the browser hence the ajax response is not updated.
How would you make dust to listen for changes to a div after the page is rendered? Is it possible in dust, similar to how react finds diff between dom and virtual dom and decides to re-render. I'm using react 0.13.3 and dust 2.7.1
