如何组织每个视图的JavaScript代码？

我正在使用mvc 4 api和vanilla mvc 4进行路由和视图的项目。因为我们使用的是web api \ json，所有的数据调用都是客户端驱动的，所以我们创建了很多javascript代码。如何组织每个视图的JavaScript代码？

为了解决这个问题，我们决定建立一个全球性的原型JavaScript对象用于处理共享的东西，包括一个JavaScript文件按次来处理所有的客户端代码的特定视图。（我知道这是不是最佳）

我的问题是与按次JavaScript文件。我们应该为每个视图创建一个原型对象还是使用闭包？

没有按次我们看到一个趋势的对象，我们通常用的$（document）。就绪，活动线的UPS，如$（文件）。在（“点击”，结束了...，视图模型一堆旧式功能，似乎应该有办法将这些区域组织成更好的东西，我已经看到了一些关于如何这样做的建议，但他们没有说明如何合并该jQuery负载，事件线跌宕，和视图模型。没有人有任何建议，或者可能一个简单的例子？

这是我们通常与最终的领域

$(document).ready(function() {.... 

$(document).on('click', '.button', function(e) {..... 

function FooBar(){.....

来源

2012-09-19 NullReference

我不认为如何最好地完成这个任务有很多快速的规则 - 很多方法来为这只猫蒙皮。

但这里是我做的：我倾向于创建一个（或更多，如果需要的话）的页面关闭对象。它将有一个包含$（）。ready（）处理程序的初始化方法，该处理程序将执行所有事件处理程序连接以及需要发生的任何其他页面全局初始化。

事情是这样的：

(function() { 
    function Page() { 
     var me = this;    

     // plain properties 
     this.prop = "value"; 

     // compiled templates 
     this.template = HandleBars.compile($("#template1").html()); 

     this.intialize = function() { 
      $().ready(function() {      
       $("#button1").click(me.button1Click); 
       $("#field1").change(me.field1Change); 
      }); 
     }; 
     this.button1Click = function() { 
      alert("click"); 
      me.doSomething(); 
     }; 
     this.field1Change = function() { 
      alert("change"); 
     }, 
     this.doSomething = function (parm) { 
      alert("doSomething"); 
     } 
    }   
    var page = new Page(); 
    page.intialize(); 
})();

来源

2012-09-20 02:13:52

你应该使用每个视图一个视图模型，并将其与KnockoutJs绑定到你的观点（HTML），或其他任何类似的JavaScript库，它提供了类似的东西（取从那里第一实例）：

视图（HTML）：

<html> 
    <body> 
     <p>First name: <input data-bind="value: firstName" /></p> 
     <p>Last name: <input data-bind="value: lastName" /></p> 
     <h2>Hello, <span data-bind="text: fullName"> </span>!</h2>  
    </body> 
</html>

视图模型（JavaScript的）：

从服务器个

var ViewModel = function(first, last) { 
    this.firstName = ko.observable(first); 
    this.lastName = ko.observable(last); 

    this.fullName = ko.computed(function() { 
     return this.firstName() + " " + this.lastName(); 
    }, this); 
};

获取数据，填充视图模型（和看法，因此）

$.get('/info/path/', function(data) { 
    ko.applyBindings(new ViewModel(data.Planet, data.Earth));  
});

当然，如果你是最后一部分是不是在页面的最后，你可以把它在一个document.ready中，或任何类似的方法。

来源

2012-09-20 03:54:36 billy

如何组织每个视图的JavaScript代码？

回答

相关问题