淘汰js - 部分模板更干燥

Question

淘汰赛的新手。

在一个淘汰视图中，比如formtest.html ，是否可以包含一个可重用的部分html，其中绑定是动态的（比如在部分模板包含点处传递？）

---

假设textarea.html和textarea.html的绑定将绑定到formtest.html的视图模型中设置的ko.observable( ）？

给定一个viewmodel

this.theviewmodelBinding = ko.observable()

和textarea绑定将设置如下：

<textarea data-bind="text: theviewmodelBinding" ...

但是如果这个textarea标记作为formtest.html的部分标记包含在内，那么数据如何绑定会更加动态呢？ 能够在Web应用程序中重用此textarea标记/部分？

所以，在我们的textarea.html部分，有些话说：

<textarea data-bind="text: {{view_model_binding_passedtothispartial}}" ...

这是否可能，是否有一个简短的例子，如果是这样，那个版本的淘汰赛是什么？

毫无疑问，我需要更多的RTFM！ 对不起，如果之前被问到 - 只是努力寻找任何与“敲除部分绑定干燥模板”有关的事情

---

谢谢！！

Answer 1

淘汰赛内置模板引擎不支持此功能。 然而，淘汰模板引擎是可插拔的，并且存在至少一个（可能有更多，只是尝试搜索更多，如果你想）这样的模板引擎; Knockout外部模板引擎。 如果您正在使用nuget，则可以轻松地为Knockout外部模板引擎安装nuget包 。

您可以在Knockout外部模板引擎Github页面上找到有关如何使用它的示例，以及一些使用说明。

Answer 2

我通过将每个Knockout模板与其自己的viewmodel配对来完成此操作; 在我的项目中，我将模板和viewmodel的组合称为“卡片”：

<div data-bind="card: 'form', cardConfig: {textareaModel: some_observable}"></div>

这会加载一个' cardConfig模板并将其绑定到'form'视图模型，该视图模型通过cardConfig访问器配置。

绑定看起来像这样：

(function(ko, pica, $) {
  "use strict";

  ko.bindingHandlers.card = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
      var cardConfig = allBindingsAccessor().cardConfig || {},
          cardName,
          cardVm;

      cardName = ko.unwrap(valueAccessor());

      // here I find and instantiate the view model belonging to this card
      cardVm = new pica.cards[cardName]();

      // configure it
      cardVm.setup(cardConfig);

      // make sure the Knockout template for this card is present,
      // then render it inside the element the card binding is bound to
      pica.TemplateManager.request(cardName)
        .done(function(templateName) {
          ko.renderTemplate(templateName, cardVm, {}, element);
        });
    }
  };

})(ko, pica, $);

这个假设的“表单”卡的viewmodel看起来像这样：

(function(pica, ko) {
  "use strict";

  var form;

  form = function form() {
    var that = this;

    this.textarea = ko.observable();

    this.setup = function setup(config) {
      this.textarea( config.textareaModel );
    }
  };

  pica.cards.form = form;

})(window.pica, ko);

它的模板就是这样

<script type="text/html" id="form">
  <!-- our scope is the form viewmodel here -->
  <textarea data-bind="text: textarea"></textarea>
</script>