如何使用requirejs打破部分淘汰赛视图模型 [英] How to Break knockout view model in parts with requirejs

问题描述

我目前正在开发一个应用程序，该应用程序由于功能众多而不断扩大.在这里，我将提供一些示例代码以供理解.

I am currently working on an application which is enlarging itself due to so much functionality. Here i am going to present some sample code to understand.

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 管理应用程序.这是我试过的.

OK. Pretty simple. You can see the sample model but it is now difficult to work with it as each section contains many functions. Lets assume more then 10 functions in each section. Now I want to manage the application using requirejs. This is what i have tried.

结构

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

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

Currently what I want is now break the model in 3 to 4 parts.

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

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

How can I achieve this. This is what I have tried.

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 视图模型中.

Here I dont know how to merge them. TaskList in events.js and helper.js is undefined. I know I need to pass TaskList as parameter but I don't want to use function way. Instead I want to use literal way to merge these two files into Tasklist.js viewmodel.

我该怎么做?

推荐答案

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

I think this is an example of what you can do (this is an example, in real life you would split into separate js files):

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

Define ko as a module (not so useful as it is, you could remove the reference to "knockout")

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

为 TaskList 定义一个模块

Define a module for the 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();
});

为事件定义一个模块并引用任务列表

Define a module for the Events and reference the 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();
});

为同样引用 TaskList 的 Helpers 定义一个模块

Define a module for the Helpers that also references the 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 a main module that will put all modules together

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中

Finally, call the main module and try to add an Item to the TaskList through the Events module

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

这篇关于如何使用requirejs打破部分淘汰赛视图模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！