带有淘汰SPA的HTML尝试使用组件，绑定不起作用

我正试图从我看过的网站和教程中制作一个带有淘汰和requirej的SPA网站，以便拆分网站，使其不再是一件巨大的事情。有一点我期待看到：

My first name is: Bryan

但我得到的却是：

My first name is: function c(){if(0<arguments.length)return c.tb(c[E],arguments[0])&&(c.ga(),c[E]=arguments[0],c.fa()),this;a.l.oc(c);return c[E]}

从我的index.thml:开始

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title>asdf</title>
</head>
<body>
   <mainview></mainview>
   <!-- global imports -->
   <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
   <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.min.js"></script>
   <script type='text/javascript' src="./index.js"></script>
</body>
</html>

我的index.js:

"use strict";
requirejs.config({
baseUrl: '',
paths: {
    knockout: 'https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min',
    text: 'https://cdnjs.cloudflare.com/ajax/libs/require-text/2.0.12/text.min'
}
});
ko.components.register(
  'mainview', 
  {
    require: './indexViewModel'
  }         
);
ko.applyBindings();

indexViewModel.js:

"use strict";
define(['knockout', 'text!./indexViewModel.html'], function(ko, htmlString) {
  function indexViewModel(params)
  {
    var self = this;
    self.firstName = ko.observable('Bryan');
  }
  return { viewModel: indexViewModel, template: htmlString };
});

最后是我的indexViewModel.html：

<div>
    <p>input name: <input data-bind="value: firstName"></input></p>
    <p>My first name is: <span data-bind='text: firstName'></span></p>
</div>

所有这些都给出了我上面所说的结果。

现在，如果我将firstname更改为firstName()，那么它最初是正确的，但如果我更改输入，则不会发生任何事情。

好吧，随着更多的挖掘和谷歌搜索，我偶然发现了解决方案。我不知道细节，但这是requirejs和knockoutjs正在碰撞一些如何

因为在我的index.html上，我导入了knocket，并将knocket设置作为配置中的requirejs参数。

我发现了这个使用requireJS加载淘汰组件视图模型这让我明白了。

好的，所以我做了这些改变：

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Battlestations Character Generator</title>
  </head>
  <body>

    <mainview></mainview>
    <!-- global imports -->
    <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.min.js"></script>
    <!-- no more knockout reference here -->
    <script type='text/javascript' src="./index.js"></script>
  </body>
</html>

现在我的index.js:

"use strict";
requirejs.config({
    baseUrl: '',
    paths: {
        knockout:     'https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min',
        text: 'https://cdnjs.cloudflare.com/ajax/libs/require-text/2.0.12/text.min'
    }
});
// "app main()"
requirejs(['knockout'], function(ko) {
    var self = this;
    ko.components.register(
        'mainview', 
        {
            require: './indexViewModel'
        }         
    );
    ko.applyBindings();
});

并将<input></input>更改为<input />，尽管这没有改变什么，但如果这是"好的做法"，我会采用它。

在这些更改之后，重新加载，一切正常，并且更改输入会更改紧接其后的<span>。
耶！

我知道一个答案是可以接受的，在这里我发布一个答案，只针对那些尝试过答案但失败的用户。我在MVC应用程序中也遇到了这个问题。问题是，我在_Layout.cshtml和我的页面中都引用了knockout-3.4.0.js文件。当我从_Layout.cshtml中删除JS引用并将其仅引用到页面时，一切都很好。干杯

相关内容

最新更新

热门标签：