javascript - 使用 html 作为 knockout 组件的输入

Question

我正在我的代码库中实现一些组件。但是，我在模板部分遇到了一个较小的问题。我想将模板作为输入发送到 knockout 组件，但我不确定该怎么做，甚至不知道是否可行。

以http://knockoutjs.com/documentation/component-overview.html为例我希望我能做这样的事情:

<like-or-dislike params="value: userRating">

    <div class="like-or-dislike" data-bind="visible: !chosenValue()">
        <button data-bind="click: like">Like it</button>
        <button data-bind="click: dislike">Dislike it</button>
     </div>

    <div class="result" data-bind="visible: chosenValue">
        You <strong data-bind="text: chosenValue"></strong> it.
        And this was loaded from an external file.
    </div>

</like-or-dislike>

但是我找不到任何文件，如果它有效的话。我想以这种方式实现它的原因仅仅是因为我有一些服务器生成的 html，我希望它仍然是组件的一部分。否则我将不得不使它成为一个 json 对象并在组件内部呈现 html，这似乎是一个不必要的额外步骤。使用组件的好处是逻辑在它自己的文件中是分离的，并且更容易在不同组件之间分离逻辑。我知道如果我这样做的话，如果我想重用该组件，我必须复制 html。

我是不是想错了，或者这可能吗？

感谢您的明智建议和更好的智慧。

Answer 1

我不能说我完全理解你的情况，但我想我可能有答案。您实际上可以让服务器生成 <script type="text/html">并将其与组件一起使用(当然是通过 id)。 KO 文档在组件模板方面很差，但这里有一个使用元素的示例。

我从组件中学到了一些东西。 View 模型必须在声明之前声明，<script>必须在绑定(bind)之前位于 dom 中。

function ComponentViewModel() {
  var self = this;
  self.Title = ko.observable("This is a Component VM");
}

function ViewModel() {
  var self = this;

  self.ExampleComponent = ko.observable({
    name: 'Example'
  });

}


ko.components.register('Example', {
  template: {
    element: 'ComponentTemplate'
  },
  viewModel: ComponentViewModel
})



ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>


<script id="ComponentTemplate" type="text/html">
  <span data-bind="text: Title"></span>
</script>

<div data-bind="component: ExampleComponent"> </div>

我不会贬低组件的值(value)，但我也会向您指出使用带有数据绑定(bind)的模板，这本质上是一样的(如果我错了请纠正我)。并且不需要建立组件。这对于潜在组件出现频率较低的情况更好。

function ComponentViewModel() {
  var self = this;
  self.Title = ko.observable("This is a Template with a VM");
}

function ViewModel() {
  var self = this;

  self.ComponentVM = ko.observable(new ComponentViewModel());

  self.ExampleComponent = ko.observable({
    name: 'ExampleTemplate', // This is the ID
    data: self.ComponentVM
  });

}

ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<script id="ExampleTemplate" type="text/html">
  <span data-bind="text: Title"></span>
</script>

<div data-bind="template: ExampleComponent"> </div>

希望这些对您有所帮助!