Backbone React Requirejs 應用實戰(二)——使用Backbone Model
在一篇《Backbone React Requirejs 應用實戰(一)——RequireJS管理React依賴》,我們介紹瞭如何使用Requirejs管理我們的JS,這一篇讓我們來看看如何使用model。
react.backbone
react.backbone簡介
專案首頁: https://github.com/clayallsopp/react.backbone
Plugin for React to make Backbone integration easier. Initialize your component with a Backbone.Model or Backbone.Collection; when the model or collection changes, #render will be called.
安裝
bower install react.backbone --save-dev
README上有這樣一個例子:
var UserViewComponent = React.createBackboneClass({
changeOptions: "change:name", // DEFAULT is "change",
render: function() {
return (
<div>
<h1>{this.getModel().get("name")}</h1>
</div>
);
}
});
var user = new Backbone.Model();
var UserView = React.createFactory(UserViewComponent);
var userView = UserView({model: user});
可惜太長了。讓我們來作一個簡單的例子:
React使用Backbone Model
記得在上一篇中,我們提到了router,在Router裡的project是這樣子的:
project: function(){
var user = new UserModel({name: 'phodal'});
var UserView = React.createFactory(ProjectComponent);
var userView = new UserView({model: user});
React.render(userView, document.getElementById('main_content'));
},
而UserModel則是一個簡單的model
define(['backbone'], function(Backbone) {
var UserModel = Backbone.Model.extend({
initialize : function(name) {
this.name = name;
},
defaults:{
name:null
}
});
return UserModel;
});
我們用到了一個叫ProjectComponent的component,最後將它渲染到main_content這個id上。
我們的projectcomponent是這樣子的:
define([
'react',
'react.backbone'
],function(React){
return React.createBackboneClass({
render: function () {
return (
<div>
<h1>{this.getModel().get('name')}</h1>
Project
</div>);
}
});
});
從我們的model裡面獲取`name
。
這樣,我們就可以簡單地在我們的應用中使用Backbone Model。
其他
相關文章
- Backbone React Requirejs 應用實戰(一)——RequireJS管理React依賴ReactUIJS
- requirejs、backbone.js配置UIJS
- Backbone原始碼分析(二)原始碼
- 使用Backbone構建精美應用的7條建議
- Backbone系列篇之Backbone.Events原始碼解析原始碼
- 使用ReactJS作為Backbone的view實現ReactJSView
- Backbone View入門View
- 經典 backbone 總結
- Backbone前端框架解讀前端框架
- Backbone.js簡介JS
- Backbone原始碼分析(一)原始碼
- Backbone原始碼分析(三)原始碼
- 開始學習 Backbone
- Backbone.js 的最佳應用場景有哪些?#zhihu#JS
- Backbone.js 的技巧和模式JS模式
- Backbone.js的技巧和模式JS模式
- Web前端框架 Backbone.MarionetteWeb前端框架
- [Backbone]7. Collection Views, Custom EventsView
- Backbone 網路-DenseNet 論文解讀SENet
- Backbone 網路-ResNet 論文解讀
- Backbone 網路-ResNet v2 詳解
- Backbone.js Basics: Bringing an App to Life with EventsJSAPP
- JavaScript MVC框架PK:Angular、Backbone、CanJS與EmberJavaScriptMVC框架AngularJS
- 用 jest 單元測試改善老舊的 Backbone.js 專案JS
- 什麼是最優秀的JavaScript框架?Angular or Backbone?JavaScript框架Angular
- BackBone.js 0.9.10 釋出,JS 的 MVC 框架JSMVC框架
- React的慢與快:優化React應用實戰React優化
- AngularJS 、Backbone.js 和 Ember.js 的比較AngularJS
- 蘋果瀏覽器應用實戰(二)蘋果瀏覽器
- 從零開始搭建React應用(二)——React應用架構React應用架構
- 使用React構建大型應用的最佳實踐React
- 如何從零入門React?實戰做個FM應用吧React
- Hadoop專案實戰-使用者行為分析之應用概述(二)Hadoop
- webpack實戰(二):真實專案中應用系統配置Web
- SpEL應用實戰
- 使用React做同構應用React
- 手把手教你React Native實戰從 React到Rn《二》React Native
- Flutter - 實戰指導,使用ScopedModel管理狀態Flutter