如何在已加载的 Javascript/Backbone 中再次调用模块

Question

我是 Javascript/backboneJS/RequireJS 的新手。为了呈现我的前端，我制作了一个控制器、一个模型和一个视图。另外，我的 html 文件中有一个下拉菜单。

所以到目前为止我所做的是在我的 html 文件中，我有

 require(['common'],function()
    {
      require(['jquery','fastclick','nprogress','charts','underscore','spinner'],function()
      {
        require(['firstDashboardController']);
      });
    });

所以我正在加载“firstDashboardController”，这个控制器会相应地加载所有模块并在前端显示数据。所以一切正常。

现在我在前端有一个下拉菜单。当我选择下拉列表时，根据选择的 id 我想检索数据。所以我需要再次调用“firstDashboardController”，以便根据我获得的新 ID 渲染所有内容。

那我该怎么办？就像我是否需要取消要求我的“firstDashboardController”然后再次要求它传递新的ID。因为控制器已经通过 Require 加载，因为我将它加载到我的 HTML 文件中，如上所述。但是我需要根据通过下拉列表选择的新 ID 再次加载它。那么该怎么做呢？请帮助我。如果需要任何代码 sn-p 我可以输入。

代码片段：

我的控制器：

define(['backbone', 'firstSubViewModel','dropdownViewModel', 'dropdownModel'],
  function(Backbone, firstSubViewModel,  dropdownViewModel, dropdownModel) {

      var ch = new dashboardModel.chart({});
        if (localStorage.getItem('p_kt') && localStorage.getItem('p_acid') && localStorage.getItem('p_seid')) {
          var data = {
            tokenProp: localStorage.getItem('p_kt'),
            accountIdProp: localStorage.getItem('p_acid'),
            sessionIdProp: localStorage.getItem('p_seid')
          };
          $.when(
            ch.fetch(data) // GETTING DATA FROM MODEL VIA AJAX CALL in my model.JS

          ).then(function() {
            // Main Graph on Dashboard
            new firstSubViewModel({
              el: '#chartAnchor1',
              model: ch
            });
    });});

不知何故，我需要再次致电ch.fetch()。

Answer 1

您没有正确定义控制器。您目前将其作为一种一次性设置方法，而不是您以后可以重新运行的方法。让我们一步一步来。

myLife.js：

define([], function() {
  return "a complex series of failures";
});

通过从define的回调中返回一个值，这定义了每当我需要“myLife”时，它将在回调函数中提供“一系列复杂的失败”。这就是 Backbone 和其他 AMD 模块在代码块中出现的方式。但是，它只运行一次内容；并保存结果。所以，这行不通：

incrementer.js：

var x = 0;
define([], function() {
  x = x + 1;
  return x;
});

（试图要求增量器会总是给你“1”。）

你想要做的是返回一个函数——你可以随时重新运行。

incrementerV2.js：

define([], function() {
  var x = 0;
  return function() {
    x = x + 1;
    return x;
  };
});

在任何文件中，您都可以这样：

require(['incrementerV2'], function(myIncr) {
  myIncr(); // 1
  myIncr(); // 2
});

...并且，作为记录，我建议尽可能在任何给定文件中只包含一个 require 语句。如果加载顺序很重要，您可以在第一个参数数组中添加依赖项。

更常见的是，人们会在一个模块中包含一个自定义对象，其中包含多个函数，而不是我上面给出的函数。返回然后仅使用一个函数也是有效的，具体取决于用例。任何变量类型都有效，但请记住，在您以后需要时，它始终是唯一且唯一的相同变量。

加载顺序

当系统检索到上面的 myLife.js 或 incrementer.js 时，在它实际运行我们定义的定义函数之前有一个中间步骤。它将查看第一个参数，即命名依赖项数组，并确定在运行给定函数之前是否还需要依赖项。示例：

a.js: require(['b', 'c'], function(b, c) {
b.js: define(['c'], function(c) {
c.js: define([], function() {

首先请求a.js，但没有运行，因为它需要B和C。B接下来加载，但因为没有加载C而被忽略。 C 运行，然后它的返回值被传递给 A 和 B。这个系统在内部非常智能，并且不应该两次请求同一个文件，或者如果一个文件先于另一个加载，则不会发生冲突。您可以像使用 Java 中的导入一样使用它。

另外，假设您只在a.js 中添加了'c'，这样b.js 就不会崩溃，因为它需要先加载它 - 在这种情况下，只需将它从 A 中取出，它应该可以正常工作.

    a.js: require(['b'], function(b) {

就像 A 所做的那样，B 会在执行任何操作之前自动加载其所有依赖项。一个简单的原则是，只有在文件中实际直接引用了依赖项（或定义了必要的全局变量）时才引用它