代码之家 › 专栏 › 技术社区 › Liam Joshua

我如何定义一个网页包“全局模块”来保存我的Knockout viewmodel?

javascript-import ecmascript-6 webpack knockout.js javascript

Liam Joshua · 技术社区 · 7 年前

我正在将一些遗留代码移到Webpack中(以帮助我控制一些依赖性。目前一切都很好。问题来自现有代码使用Knockout。我需要一种方法来访问各种组件中的视图模型。因此我需要一些东西来保存此视图模型。 This question seems to provide me a good solution :

Webpack只对模块求值一次,因此您的实例仍然是全局的有点像地球仪。js并导出所有全局变量的对象然后您可以导入'/globals’和对这些globals的读/写。

但我真的不知道该怎么做。我对webpack很陌生/ import export 所以我没有掌握最新的基本原理。我想要一个“模块”。太好了,webpack对此有何评论:

什么是网页包模块

与节点相反。js模块、网页包模块可以表达以各种方式依赖

什么真的,就这样?!所以我在努力解决什么是模块以及如何使用模块的问题?

到目前为止,我已经定义了导出的函数并导入了它们(这些是模块吗??)。所以我会这样做:

export default function koModule(){
  var viewModel = {}

  function setViewModel(vm){
      viewModel = vm;
  }

  function getViewModel(){
     return viewModel;
  }

  return {
     setViewModel:setViewModel,
     getViewModel : getViewModel
  }
}

我想我可以在创建初始viewmodel时使用它:

import koModule from './koModule.js'

...
//obviously wrong....
var myKoModule = koModule();
myKoModule.setViewModel(vm);
...

但这显然是错误的 myKoModule 将在每次调用函数时实例化。。。任何试图读取它的模块只会得到一个空白对象:

import koModule from './koModule.js'

...
//obviously wrong....
var myKoModule = koModule();
var vm = myKoModule.getViewModel();
//vm is undefined...

在前一个问题中,它指出 . 很明显,我不知道模块是什么,也不知道该如何使用它们。

因此,根据我的要求,有人能提供一个工作网页“模块”的示例,以及它在保存、读取和写入全局变量时的用法,同时仍然允许我 进口 它

很明显,我在这里遗漏了一些基本的东西,但我真的不知道它是什么。

1 回复 | 直到 7 年前

prograhammer 7 年前

这是我能为你做的最接近的事情,而不知道你想要如何使用你的模型。这就是我在网页包中使用viewModels的方式,它们本质上只是带有内置方法的构造函数,我可以在需要时调用这些方法。

import ko from 'knockout'
import koModule from './koModule.js'

const model = new koModule('Budhead2004 was here', 'More Stuff here');
ko.applyBindings(model);

小模块。js公司

import ko from 'knockout'

// This is your viewModel
class koModule {
  constructor(r,t) {
    this.Test1 = ko.observable(t);
    this.Something = ko.observable(r);
    this.Click1 = function() {
      alert('test')
    }
  }
}

export default koModule

HTML

<!-- language: html -->

<!doctype html>
  <html>
    <head>
      <meta charset="utf-8"/>
    </head>
    <body>
      <h1 data-bind="text: Something"></h1>
      <input type="text" data-bind="textInput: Test1" />
      <span data-bind="text: 'Results of Test1: ' + (Test1() ? Test1() : '')"></span>
      <br>
      <button data-bind="click: Click1">Click Me</button>

      <script src="main.js"></script>
    </body>
  </html>

Working example here