javascript - 如何使用knockoutjs从字符串生成表单和文本？

Question

我有一个像这样的字符串:

var par = '你好，我的名字是@firstname。'


使用knockout js，我想将此字符串生成为表单和文本，可能是这样的:

<input type="text" data-bind="value:firstname" />

<p>
hello my name is <span data-bind="text:firstname"></span>.
</p>

因此@firstname将生成一个值为firstname的输入，并且firstname的每次更新都会更新该段落。

我创建了一个 jsfiddle 来测试: https://jsfiddle.net/yozawiratama/rmsuc5uv/

但仍然不起作用，因为仍然是硬编码的谢谢

Answer 1

这实际上是一个非常有趣的问题，并且您已经基本解决了它。唯一的问题是，您正在更改 par，因此在第一次替换后，它不再包含您的变量。相反，在计算中处理原始副本，然后返回该副本。

var par = 'hello my name is @firstname.'
var pattern = /\B@[a-z0-9_-]+/gi;
var ViewModel = function() {
  var self = this;
  self.firstname = ko.observable("yoza");
  self.defaultParagraph = ko.observable(par);
  self.paragraph = ko.computed(function() {
    var p = self.defaultParagraph().match(pattern); //to get @firstname
    var newPar = par;
    for (var ii = 0; ii < p.length; ii++) {
      var re = new RegExp(p[ii], 'g'),
          replacement = self[p[ii].replace('@', '')]();

      newPar = newPar.replace(re, replacement);
    }
    return newPar;
  });
}

ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input type="text" data-bind="value:firstname" />

<p data-bind="text:paragraph">
</p>

对于更一般的情况，您不知道变量可能是什么，您需要一个绑定(bind)空对象的自定义绑定(bind)处理程序。 init 部分将在该对象内创建可观察对象并创建 DOM 元素，并调用绑定(bind)。 更新部分将类似于您的计算。