html5中的用戶控件等效

我正在試圖在html5 SPA世界中找到.Net usercontrol的等價物。 react組件屬於此或angular指令。我想創建一個由多個渲染組件組成的頁面（網格，圖表等）與套接字進行通信。我想通過指向不同的數據源來重用這些。html5中的用戶控件等效

一個例子是一個圖表和一個網格（帶有基礎數據）以及一個在圖表和網格之間切換的按鈕。我如何將它作爲一個組件在同一個應用程序中多次使用，並且可以共享到不同的應用程序。

來源

2015-11-27 anivas

是的，您可以使用Reactjs或Angularjs，如果各部分的狀態發生多次變化，我會推薦Reactjs，在reactjs中每個組件都有一個狀態，Reactjs知道何時重新呈現組件，因爲它能夠觀察這些數據何時發生變化。關於reactjs的髒檢查很慢。

換句話說，Reactjs可以給你更好的性能，但請注意，Reactjs僅適用於UI，沒有路由或其他類似的Angularjs。

我希望幫助，祝你好運

來源

2015-11-30 08:43:22 user2120121

-1

Angular和React可以做到這一點，但React是基於組件設計的，所以它對於你想要達到的目標來說是完美的。

來源

2015-11-30 08:41:29 Tom

我做這個確切的事情與JS對象，jQuery和把手的簡單組合。如果你不需要它們，那麼不需要Angular等人（如果你這樣做的話，他們沒有任何問題）。我定義我的組件JS對象：

/** 
* A data grid. 
*/ 
function Grid(columns, $container) { 
    this.columns = $.extend([], columns); 
    ... 
    this.render($container); 
} 

/** 
* Render the grid into a container. 
* @private 
*/ 
Grid.prototype.render = function($container) {

渲染視圖與把手完成：

<div class="grid"> 

    <header> 
      <div class="label"> 
       {{#each columns}}<div data-id="{{id}}" data-index="{{@index}}" style="width:{{boxWidth}}px">{{name}}</div><nav></nav>{{/each}} 
      </div>

該模型是由Ajax調用獲得：

/** 
* Handle a grid filter change. 
* @private 
*/ 
MasterCompanyList.prototype.onFilter = function(e, filter) { 
    App.loading.start(); 
    App.ajax({ 
     url: 'ws/admin/mcl', 
     data: filter.filter, 
     context: this, 
     success: function(json) { 
      this.grid.setData(json); 
      App.loading.done(); 
     } 
    }); 
};

所有在比Angular等更簡單的級別（我已經使用Angular商業化了幾年），但是我發現這個KISS方法讓我無需依賴較重的框架就能獲得我所需的位置 - 如果我想操縱某些jQuery樣式，那麼我就可以離開。

來源

2015-11-30 08:55:00 Kong

html5中的用戶控件等效

回答

相關問題