我是ReactJS的新手,現在原諒我。我們的醫院現有Marionette BackboneJS應用程序。但是,下面的代碼是一個工作BackboneJS木偶的例子,我想用ReactJS視圖替換Marionette。這將極大地幫助我如何能夠遷移到ReactJS。將視圖更改爲ReactJS
如果我們可以使用GET方法調用(xhr/ajax)檢索contentPlacement:「here」,它也會很棒。
<header>
<h1>An Example BackboneJS Marionette</h1>
</header>
<article id="main">
</article>
<script type="text/html" id="sample-template">
put some content <%= contentPlacement %>.
</script>
及以下的javascript代碼
// Define the app and a region to show content
// -------------------------------------------
var App = new Marionette.Application();
App.addRegions({
"mainRegion": "#main"
});
// Create a module to contain some functionality
// ---------------------------------------------
App.module("SampleModule", function(Mod, App, Backbone, Marionette, $, _){
// Define a view to show
// ---------------------
var MainView = Marionette.ItemView.extend({
template: "#sample-template"
});
// Define a controller to run this module
// --------------------------------------
var Controller = Marionette.Controller.extend({
initialize: function(options){
this.region = options.region
},
show: function(){
var model = new Backbone.Model({
contentPlacement: "here"
});
var view = new MainView({
model: model
});
this.region.show(view);
}
});
// Initialize this module when the app starts
// ------------------------------------------
Mod.addInitializer(function(){
Mod.controller = new Controller({
region: App.mainRegion
});
Mod.controller.show();
});
});
// Start the app
// -------------
App.start();
這裏是的jsfiddle鏈接 - http://jsfiddle.net/Lvnwj2dp/1/
是否有人可以指導我,我將如何與ReactJS的視圖替換木偶?一個新的代碼真的很棒!
更新:
這是我的新jsfiddle。它正在進行REST API調用,但它不更新DOM。 http://jsfiddle.net/6df6a2zv/10/
var url = 'http://jsonplaceholder.typicode.com';
var responseText = '';
console.log('executing the request ......');
$.ajax({
url: url + '/posts/1',
method: 'GET'
}).then(function(data) {
responseText = data;
});
var CommentBox = React.createClass({displayName: 'CommentBox',
render: function() {
return (
React.createElement('div', {className: "commentBox"},
"REST response:" + responseText
)
);
}
});
ReactDOM.render(
React.createElement(CommentBox, null),
document.getElementById('main')
);
// Define the app and a region to show content
// -------------------------------------------
// var App = new Marionette.Application();
// App.addRegions({
// "mainRegion": "#main"
// });
// Create a module to contain some functionality
// ---------------------------------------------
// App.module("SampleModule", function(Mod, App, Backbone, Marionette, $, _){
// Define a view to show
// ---------------------
// var MainView = Marionette.ItemView.extend({
// template: "#sample-template"
// });
// Define a controller to run this module
// --------------------------------------
// var Controller = Marionette.Controller.extend({
// initialize: function(options){
// this.region = options.region
// },
// show: function(){
// var model = new Backbone.Model({
// contentPlacement: "here"
// });
// var view = new MainView({
// model: model
// });
// this.region.show(view);
// }
// });
// Initialize this module when the app starts
// ------------------------------------------
// Mod.addInitializer(function(){
// Mod.controller = new Controller({
// region: App.mainRegion
// });
// Mod.controller.show();
// });
// });
// Start the app
// -------------
// App.start();
什麼是你的問題? –
如何用ReactJS視圖替換Marionette視圖,就像我在主題中寫的一樣。非常感謝。我更新了我的帖子,並在最後添加。 – devwannabe
請寫我的代碼 – jantimon