knockout.js - Cómo romper el modelo de vista de nocaut en piezas con requirejs

structure

Question

Actualmente estoy trabajando en una aplicación que se está ampliando debido a tanta funcionalidad. Aquí voy a presentar algunos ejemplos de código para entender.

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

DE ACUERDO. Bastante simple. Puede ver el modelo de muestra pero ahora es difícil trabajar con él, ya que cada sección contiene muchas funciones. Asumamos más de 10 funciones en cada sección. Ahora quiero gestionar la aplicación utilizando requirejs . Esto es lo que he intentado.

The Structure

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

Actualmente lo que quiero ahora es romper el modelo en 3 a 4 partes.

• Colección.js donde defino solo observableArray()
• Events.js donde quiero definir funciones relacionadas con el servidor
• Helpers.js donde quiero definir funciones para hacer algún trabajo interno.

Cómo puedo conseguir esto. Esto es lo que he intentado.

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

Aquí no sé cómo fusionarlos. TaskList en events.js y helper.js no está definido. Sé que necesito pasar TaskList como parámetro pero no quiero usar la función de modo. En su lugar, quiero usar una forma literal de combinar estos dos archivos en el modelo de vista Tasklist.js.

¿Cómo puedo hacer esto?

Answer 1

Creo que este es un ejemplo de lo que puede hacer (este es un ejemplo, en la vida real se dividiría en archivos js separados):

Defina ko como un módulo (no es tan útil como es, podría eliminar la referencia a "knockout")

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

Definir un módulo para la lista de tareas.

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

Defina un módulo para los eventos y haga referencia a la lista de tareas.

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

Defina un módulo para los Ayudantes que también haga referencia a la Lista de tareas

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

Definir un módulo principal que unirá todos los módulos.

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

Finalmente, llame al módulo principal e intente agregar un Artículo a la Lista de tareas a través del módulo Eventos

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

Demo actualizada

Answer 2

Una cosa a considerar aquí es que require.js no solo quiere que usted haga módulos dentro de un solo archivo JavaScript, sino que quiere que divida los módulos en archivos separados para evitar que los módulos se sobredimensionen. El problema con el que se está ejecutando es que no tiene ninguna forma de nombrar sus módulos actualmente para que los demás sepan de ellos. Considera esto -

Tasklist.js

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

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

Por supuesto, esto supone que ya tiene un main.js o algún punto de entrada con la configuración de require.js configurada para permitirle saber dónde encontrar los archivos. Si no tienes eso, se vería algo así:

Main.js

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

Lo que supone que tiene algo parecido a esto para su estructura de archivos:

(proyecto dir)
/ app /
Main.js
Eventos.js
TaskList.js
Helpers.js

Ahora, cuando cargue require.js en su archivo html y apunte a main.js como el punto de entrada, se cargarán todos sus módulos.