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 */
}

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

The Structure

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

目前我想要的是现在将模型分成3到4个部分。

我只定义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 viewmodel中。

我该怎么做？

Answer 1

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

将ko定义为一个模块（不是那么有用，你可以删除引用＆＃34; knockout＆＃34;）

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();
});

为事件定义模块并引用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();
});

为Helpers定义一个模块，该模块也引用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模块

将Item添加到TaskList

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);
});

Updated Demo

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配置已设置为要求知道 where 以查找文件。如果你没有，它会看起来像这样 -

Main.js

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

假设您的文件结构有类似的内容 -

（项目目录）
  /应用/
  Main.js
  Events.js
  TaskList.js
  Helpers.js

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

如何使用requirejs打破部分中的淘汰视图模型

2 个答案:

Updated Demo