如何在有需求的部分中拆分视图模型

Question

我目前正在开发一个应用程序，由于功能太多，它正在扩大自己。在这里，我将提供一些示例代码来理解。

function test(){
    var self = this
    /*  Define Properties   */
    self.TaskSection = ko.observable()
    .
    .
    /*  Define Get Requrest */
    self.GetTasks = function(){
    }
    .
    .
    /*  Define Post Requrest    */
    self.PostTask  = function(){
    }
    .
    .
    /*  Define Helper Methods   */
    self.FormatDate  = function(){
    }   
    .
    .
    /*  Define Navigation Methods   */
    self.HomePage  = function(){
    }   
    .
    .
    /*  End */
}

OK。很简单。您可以看到示例模型，但现在很难使用它，因为每个部分都包含许多函数。我们假设每个部分中有10个以上的函数。现在我想使用requirejs来管理应用程序。这是我试过的。

The Structure

app/
    js/
        /Collections/   /*  For ObservableArrays    */
        /Events/        /*  For Collections and Models  */
        /Helpers/       /*  For Collections and Models  */
        /Models/        /*  Default Properties  */

现在我想把模型分成3到4个部分。

• Collection.js中我只定义了observableArray()
• Events.js，其中我想定义服务器相关的函数
• Helpers.js在那里我想定义函数做一些内部工作。

我怎样才能做到这一点。这是我试过的。

define(["knockout"],function (ko) {
    function test(){
        var self = this
        self.TaskList = ko.observanleArray()
    }
    return new test()
});
define(["knockout","TaskList"],function (ko,TaskList) {
    var events  = function() {
        var self = this
        self.AddItem = function (data) {
            TaskList.push(TaskModel)
        }
        self.RemoveItem = function (data) {
            TaskList.remove(data)
        }
    }
    return new events()
});
define(["knockout","TaskList"],function (ko,TaskList) {
    var helpers  = function() {
        var self = this
        self.SortTaskList = function (data) {
            TaskList.sort()
        }
    }
    return new helpers()
});

这里我不知道如何合并它们。events.js和helper.js中的TaskList未定义。我知道我需要传递TaskList作为参数，但我不想使用函数的方式。相反，我想使用文字的方式来合并这两个文件到Tasklist.js视图模型。

我该怎么做?

Answer 1

我认为这是你可以做的一个例子(这是一个例子，在现实生活中你会分割成单独的js文件):

将ko定义为一个模块(没有那么有用，您可以删除对"knockout"的引用)

define("knockout", function () {
    return ko;
});

为TaskList定义一个模块

define("TaskList", ["knockout"],function (ko) {
    function TaskList(){
        var self = this;
        self.NameInput = ko.observable("");
        self.DescInput = ko.observable("");
        self.TaskList = ko.observableArray();
    }
    return new TaskList();
});

为Events定义一个模块并引用TaskList

define("Events", ["knockout","TaskList"],function (ko, obj) {
    var events  = function() {
        var self = this;
        self.AddItem = function (data) {
            var inputData;
            if (typeof(data.Name) === 'undefined') {
                inputData = { Name: obj.NameInput(), 
                              Description:  obj.DescInput() };
            } else
                inputData = data;
            obj.TaskList.push(inputData);
        }
        self.RemoveItem = function (data) {
            obj.TaskList.remove(data);
        }
    }
    return new events();
});

为helper定义一个也引用TaskList的模块

define("Helpers", ["knockout","TaskList"],function (ko, obj) {
    var helpers  = function() {
        var self = this;
        self.SortTaskList = function (data) {
            obj.TaskList.sort();
        }
    }
    return new helpers();
});

定义一个主模块，将所有的模块放在一起

define("Main", ["knockout","TaskList", "Events", "Helpers"], 
       function (ko, obj, e, h) {
    var main  = function() {
        var self = this;
        self.Tasks = obj;
        self.Events = e;
        self.Helpers = h;
    }
    return new main();
});

最后，调用主模块并尝试通过Events模块

向TaskList添加一个Item

require(["Main", "knockout"], function (main, ko) {
   main.Events.AddItem({ Name: "My first task", Description: "Start the job"});
   main.Events.AddItem({ Name:"My second task", Description:"Continue the job"});
   main.Events.AddItem({ Name: "My last task", Description: "Finish the job"});
   ko.applyBindings(main);
   console.log(main.Tasks.TaskList().length);
});

<<h2>更新演示/h2>

Answer 2

这里需要考虑的一件事是require.js不只是希望您在单个JavaScript文件中创建模块，它希望您将模块分解为单独的文件，以防止模块变得过大。您遇到的问题是，您目前没有任何方法来命名您的模块，以便其他人知道它们。考虑这个-

Tasklist.js

define(["knockout"],function (ko) {
    function test() {
        var self = this;
        self.TaskList = ko.observableArray();
    };
    return new test();
});

Events.js

define(["knockout","app/TaskList"],function (ko,TaskList) {
    var events  = function() {
        var self = this;
        self.AddItem = function (data) {
            TaskList.push(TaskModel);
        };
        self.RemoveItem = function (data) {
            TaskList.remove(data);
        };
    }
    return new events();
});

Helpers.js

define(["knockout","app/TaskList"],function (ko,TaskList) {
    var helpers = function() {
        var self = this;
        self.SortTaskList = function (data) {
            TaskList.sort();
        };
    }
    return new helpers();
});

当然，这假设你已经有了一个main.js或一些入口点，设置了require.js配置，让require知道在中找到文件。如果你没有，它看起来像这样-

Main.js

requirejs.config({
    baseUrl: 'lib',
    paths: {
        app: '../app'
    }
});

假设你的文件结构中有这样的内容-

(项目dir)
/应用程序/
Main.js
Events.js
TaskList.js
Helpers.js

现在，当你在html文件中加载require.js并指向main.js作为入口点时，你所有的模块都会被加载。