Question

淘汰赛的新手。

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

说textarea.html并且textarea的绑定将绑定到ko.observable(的视图模型中设置的formtest.html？

鉴于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，则可以轻松安装the nuget package for the Knockout External Template Engine。

您可以找到有关如何使用它的示例，以及the Knockout External Template Engine Github page上的一些使用说明。

Answer 2

我通过将每个Knockout模板与其自己的viewmodel配对来完成此操作;在我的项目中，我将模板和视图模型的组合称为＆＃34; card＆＃34;：

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

这会加载一个＆＃39;表格＆＃39;淘汰模板并将其绑定到一个＆＃39;形式＆＃39; viewmodel，通过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, $);

此假设形式的视图模型＆＃39;卡片看起来像这样：

(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>

淘汰js - 部分模板更干燥

2 个答案: