您的位置：首页 > Web前端 > React

Backbone+React使用

2016-07-24 10:27 585 查看

1.react作为backbone的视图

2.backone和react和通信，backbone的view 渲染react组件， react组件使用backbone的collection数据

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.js"></script>
<script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.js"></script>
<script src="http://static.runoob.com/assets/react/browser.min.js"></script>
<script type="text/ecmascript" src="app/scripts/vendor/jquery.min.js"></script>
<script src="app/scripts/vendor/underscore.js"></script>
<script src="app/scripts/vendor/backbone.js"></script>
</head>
<body >
<a class="search">点此search</a>

<div id="con">

<script type="text/babel">
var HelloMessage = React.createClass({
render: function() {

var arr=[];
this.props.model.each(function(it){
arr.push('<p>'+it.get('name')+Math.random(0,100000)+'</p>')
});
return <div><h1>Hello World！{this.props.name}</h1>
<h5>
{
arr
}

</h5>
</div>;
}
});

//      ReactDOM.render(
//        <HelloMessage />,
//        document.getElementById('example')
//      );

var Model=Backbone.Model.extend({
defaults:{name:'moren',sex:'nan',email:'eml'}
});

var CO=Backbone.Collection.extend({
model:Model,
url:'/data.aspx'
});
var co=new CO();
var MyView = Backbone.View.extend({
el: 'body',
events:{'click .search':'searchobj'},
template: '</br><div class="widget-container"></div>',
render: function() {
this.$el.append(this.template);

var that=this;
co.fetch({success:function(){

that.search();
}
});

return this;
},
searchobj:function(){
var that=this;
co.fetch({success:function(){

that.search();
}
})
},
search:function(){
var HM=React.createFactory(HelloMessage);
ReactDOM.render(new HM({name:'xxxxx',model:co}), this.$('.widget-container').get(0));
// ReactDOM.render( HM({name:'xxxxx'}), this.$('.widget-container').get(0));
// ReactDOM.render(<HM  name='xiaoxiao' mod={co}/>), this.$('.widget-container').get(0));
// ReactDOM.render(<HelloMessage  name='xiaoxiao' />), this.$('.widget-container').get(0));
},
initialize:function(){

}
});

new MyView().render();
</script>
</div>

</body>
</html>

data.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="data.aspx.cs" Inherits="TestBackBone.data" %>

[{
"name":"张国立",
"sex":"男",
"email":"zhangguoli@123.com"
},
{
"name":"张国立2",
"sex":"男2",
"email":"zhangguoli2@123.com"
}]

View Code

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航