Knockout.js - 定义了视图模型并且模板可以访问它，但是不能使用视图模型属性的值答案

【问题标题】：Knockout.js - view model is defined and the template has access to it, but the value of the view model properties cannot be usedKnockout.js - 定义了视图模型并且模板可以访问它，但是不能使用视图模型属性的值
【发布时间】：2022-09-23 17:00:20
【问题描述】：

好的 - 我一直在修复项目中的一些遗留错误，它正在使用 Knockout.js。我对这个库很陌生，所以请原谅我的无知。

所以我有一个包含这个 HTML 块的对话框模板：

        <ul class=\"nav\">
            <li class=\"active\">
                <a href=\"#add\" data-toggle=\"tab\">Add New</a>
            </li>
            <li>
                <a href=\"#chooseExisting\" data-toggle=\"tab\" data-bind=\"text: console.log($data)\"></a>
            </li>
            <!-- ko if: shouldShowMoreInfo() -->
                <li data-bind=\"text: console.log(shouldShowMoreInfo())\">More Info</li>
            <!-- /ko -->

            // using this as a test
            <li data-bind=\"text: testMessage()\"></li>
        </ul>

这是视图模型：

        var viewModel = {
            tabs: ko.observableArray([
                {
                    name: \"Add New\",
                    value: \'[href=\"#add\"]\'
                },
                {
                    name: \"Choose Existing\",
                    value: \'[href=\"#chooseExisting\"]\'
                },
            ]),
            activeTab: ko.observable(),
            shouldShowMoreInfo: ko.observable(),
            testMessage: ko.observable()
        };

        viewModel.activeTab(viewModel.tabs()[0].value);
        viewModel.shouldShowMoreInfo(false);
        viewModel.testMessage(\'test message\');

        return viewModel;

问题是，模板中的data-bind=\"text: console.log($data)\" 成功注销了视图模型及其所有属性。我还可以控制台注销特定的属性值。但是，如果我尝试在 if 或 hidden 语句中使用它们，则不会发生任何事情。

例如在模板中 - 你会注意到我正在尝试使用 if 语句有条件地呈现 More Info 选项卡，但是，if 语句什么也不做。我可以成功注销shouldShowMoreInfo()，它将评估为false。我希望if 语句不会呈现<li> 作为结果。此外，我试图通过data-bind=\"text\" 呈现的测试消息不起作用，但在控制台日志中可以访问testMessage。

我在这里有点困惑 - 模板似乎可以访问视图模型，除了能够成功console.log 他们之外，我无法对视图模型属性做任何事情。

标签： javascript knockout.js knockout-mvc

【解决方案1】：

我相信您错过了对ko.applyBindings(viewModel[, domElement]) 的核心调用

如果您希望绑定整个 dom，则第二个参数是可选的。

您确实可以在控制台中获取 javascript 值的原因是因为您始终可以这样做，不仅在使用敲除时，而且您需要实际调用绑定来启动视图和视图模型之间的双向绑定。

var viewModel = {
  tabs: ko.observableArray([{
      name: "Add New",
      value: '[href="#add"]'
    },
    {
      name: "Choose Existing",
      value: '[href="#chooseExisting"]'
    },
  ]),
  activeTab: ko.observable(),
  shouldShowMoreInfo: ko.observable(),
  testMessage: ko.observable()
};

viewModel.activeTab(viewModel.tabs()[0].value);
viewModel.shouldShowMoreInfo(false);
viewModel.testMessage('test message');

ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js" integrity="sha512-2AL/VEauKkZqQU9BHgnv48OhXcJPx9vdzxN1JrKDVc4FPU/MEE/BZ6d9l0mP7VmvLsjtYwqiYQpDskK9dG8KBA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<ul class="nav">
  <li class="active">
    <a href="#add" data-toggle="tab">Add New</a>
  </li>
  <li>
    <a href="#chooseExisting" data-toggle="tab" data-bind="text: $data"></a>
  </li>
  <!-- ko if: shouldShowMoreInfo() -->
  <li data-bind="text: shouldShowMoreInfo()">More Info</li>
  <!-- /ko -->

  // using this as a test
  <li data-bind="text: testMessage()"></li>
</ul>


<button data-bind="click: () => shouldShowMoreInfo(!shouldShowMoreInfo())">
toggle
</button>

【讨论】：