1

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

为了解决这个问题，我们决定创建一个全局原型 javascript 对象来处理共享的内容，并为每个视图包含一个 javascript 文件来处理该特定视图的所有客户端代码。（我知道这不是最佳的）

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

如果没有每个视图的对象，我们会看到一个趋势，我们通常会得到一个 $(document).ready、像 $(document).on('click', ...、视图模型和一堆旧的事件连接学校功能。似乎应该有一种方法可以将这些区域组织成更好的东西。我已经看到了一些关于如何这样做的建议，但它们没有显示如何合并 jQuery 加载、事件连接和查看模型。有没有人有任何建议，或者可能是一个简单的例子？

以下是我们通常会遇到的区域

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

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

function FooBar(){.....
4

2 回答 2

2

我认为如何最好地做到这一点没有任何硬性规定 - 有很多方法可以给这只猫剥皮。

但这是我所做的：我倾向于为页面创建一个（或多个，如果需要）闭包对象。它将有一个包含 $().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-20T02:13:52.820 回答
0

您应该为每个视图使用一个视图模型，并使用KnockoutJs或任何其他类似的 javascript 库将其绑定到您的视图（html），它提供了类似的内容（取自第一个示例）：

视图（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-20T03:54:36.753 回答