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

【问题标题】：HTML with knockout SPA attempt with components, bindings not working带有组件的淘汰赛 SPA 尝试的 HTML，绑定不起作用
【发布时间】：2016-04-12 15:01:54
【问题描述】：

我正在尝试使用我看过的网站和教程中的淘汰和 requirejs 制作一个 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()，那么它最初会正确显示，但如果我更改输入，则什么也不会发生。

【问题讨论】：

和其他东西，由于我看到的另一个问题，为了让这个页面正常工作，我不得不使用这个：#!/bin/bash lserver -p 9000 -r ./ -f ./index.html
您对ko.applyBindings 没有任何论据。您想将您的视图模型传递给它。
我这样做的方式，我没有主视图模型，它是通过淘汰组件系统自动连接的
嗯，如果我将您的代码转换为非 requirejs 版本it works fine，那就奇怪了。 - PS。附带说明：input 要么是自关闭的，要么是无效的，不要使用单独的结束标签。
通常情况下，如果 Knockout 无法再看到某事物是可观察的，那么您看到的输出就是您所得到的。 For example 数据绑定时 text: ""+firstName.

标签： javascript html knockout.js requirejs single-page-application

【解决方案1】：

好的，通过更多的挖掘和谷歌搜索，我偶然发现了解决方案。我不了解详细信息，但它的 requirejs 和 knockoutjs 发生了一些冲突

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

我发现了这个 Issue loading knockout components view model using 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>。
耶！

【讨论】：

<input></input> 和<input/> 的区别不在于一个是“好的做法”，而在于另一个是不正确的 HTML。在这种情况下，所有浏览器都恰好对此错误具有相同类型的纠错 - 忽略 </input> 就好像它不存在一样 - 但你不应该指望这种情况总是如此。

【解决方案2】：

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

【讨论】：