rxjs+d3实现mvc架构编程的demo示例代码
代码语言:html
所属分类:其他
代码描述:rxjs+d3实现mvc架构编程的demo示例代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <div id="content"></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/rx.all.2.3.22.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/d3.v3.js"></script> <script> // channels // Determine whether these should be separate or part of the objects below. // If sepearate, they can easily be referenced, but then they are also disconnected from their "source" // If embedded, then they must be exposed through the objects. var modelChanged = new Rx.Subject(); var addNewItem = new Rx.Subject(); var clearAll = new Rx.Subject(); // This could easily be replaced by just using Rx DOM wrappers and .map var buttonClicked = new Rx.Subject(); // model proxy function Model() { var data = []; var add = addNewItem.subscribe(function (e) { // Push to server-side resource // Receive response from server-side resource var newItem = 'new item'; data.push(newItem); // Publish result modelChanged.onNext(data); }); var clear = clearAll.subscribe(function () { data = []; modelChanged.onNext(data); }); return { dispose: function () { add.dispose(); clear.dispose(); } }; } // Controller maps UI events to model events function Controller() { var subscription = // return the disposable buttonClicked.subscribe(function (toggle) { switch (toggle) { case 'Add': addNewItem.onNext(); break; case 'Clear': clearAll.onNext(); break; } }); return subscription; } // view function View(el) { function init(el) { var frag = document.createDocumentFragment(); var header = documen.........完整代码请登录后点击上方下载按钮下载查看
网友评论0