世界上有無純code based既front end data binding?

本帖最後由 3ldk 於 2015-3-27 18:22 編輯

睇過咁多常見的js framework/library, 無一隻唔係在html入面做手腳的

有D可能用directive
有D用自己type既script
有D用js template engine

依D全部要靠係HTML入面加野去配合

但世上有無純javascript既data binding呢?
例如我有咁既html
  1. <input id="textbox" type="text" />
  2. <div id="display"></div>
複製代碼
係唔洗改任何HTML既情況下
做類似以下既野就可以bind到
  1. var data='this is data';
  2. xxxFramework.bind(data,
  3.                         [
  4.                         document.getElementById("textbox"),
  5.                         document.getElementById("display")
  6.                         ]
  7.                 );
複製代碼
又或者可能係類似咁
  1. xxxFramework.bind(document.getElementById("textbox"),
  2.                         document.getElementById("display"));
複製代碼

angularJS (From google) https://angularjs.org/
two way binding


reactJS(from Facebook) http://facebook.github.io/react/
Not using binding but re-rendering


如果你想要個好lightweight,Microsoft 出過咁既野 (不過好舊)
http://blog.jquery.com/2010/04/2 ... feedback-requested/

TOP

jquery 唔得咩?
就係因為要用js 自己去搵返
d framework 係你前期定義左,佢就自動同你做,慳返好多code

TOP

jquery 唔得咩?
就係因為要用js 自己去搵返
d framework 係你前期定義左,佢就自動同你做,慳返好多code ...
DarkHero 發表於 2015-3-27 23:59



jquery有binding?



D framework就係前期定義花好多工夫去做, 反而係多左好多code

或者我用其中一個最簡單的framework做例子講解一下, 至於angularjs果D用directive既就更加多code, 所以就更加唔洗講

http://www.ractivejs.org/60-second-setup

依個framework已經係最簡單既framework, 個例子亦好簡單, 只係bind左個variable落去input box同display果個位

如果用我問緊果種方法, 只係需要1-2句javascipt就做到

但如果用依個framework
除左果句用黎bind既javascript
  1.     var ractive = new Ractive({
  2.       el: '#container',
  3.       template: '#template',
  4.       data: { name: 'world' }
  5.     });
複製代碼
你仲要將所有html搵野包著佢
  1.   <script id='template' type='text/ractive'>

  2.   </script>
複製代碼
然後加多個位比佢output
  1. <div id='container'></div>
複製代碼
仲要係個target display加返個 {{name}}

依個example無用textbox改value
如果有, 你仲要去textbox加返個value=" {{name}}"

你話, 同我果個比, 係咪做多左好多野?

而且咁仲會其他問題
例如當一個designer寫好晒成個html layout比你, 個html可能好長, input同display可能相距好遠, 你就要上上落落咁搵返唔同既位出黎改

而且你加左好多唔係html既野落去, designer會睇唔明, 想改果陣會出好多問題

TOP

jquery有binding?



D framework就係前期定義花好多工夫去做, 反而係多左好多code

或者我用其中一個最 ...
3ldk 發表於 2015-3-28 01:16


炒左個designer

我認為真正關於react gei 得 6行
而你個例子有7行

就算你講ui change 個問題
個ui 改左都係你去d code 度慢慢改
根本兩者就係同等成本

都係個句,炒左個designer

TOP

炒左個designer

我認為真正關於react gei 得 6行
而你個例子有7行

就算你講ui change 個問題
個ui  ...
DarkHero 發表於 2015-3-28 02:18



我個例子base on html只加一句

ractive個例子係加最少四句, 再改一句

ui changea問題, 前者只改一句js, 後者改完js仲要改html

此外, 雖然你把口係咁講, 但我都幾sure, 如換左你在同樣處境, 一定做唔出炒designer

TOP

本帖最後由 hihihi123hk 於 2015-3-28 09:26 編輯
依D全部要靠係HTML入面加野去配合
3ldk 發表於 2015-3-27 14:25


成個development flow,
   
如果 front end 砌 果陣 無 expected output,例如 {{firstName}} {{price}} ,其實知唔知做緊乜野先? 你砌front end 你都要 入啲 sample output 入去啦, 用angular js 就係 砌果陣 用 {{xxx }} 之後 駁model 直接自動bind

如果怕 framework 好難 plug 落現有 project, 可以試下 用 handlebarjs +jquery, 即食既 template engine

http://handlebarsjs.com/
http://tryhandlebarsjs.com/

只要你啲 template design 得好,一個一個 component,   每次 update render 番 嗰個 component 就搞掂

同埋 front end  駁 backend ,以前最辛苦就係駁 API ,而家基本上 叫 backend 比個 sample JSON 你 ,front end 已經可以開工,

到時只要 將個static json  轉番做用 ajax / websocket 拎就搞掂

TOP