knockoutjs可观察格式

Question

我是knockoutjs世界的新手。我正在尝试使用knockout.js构建一个非常简单的单页UI。在我的viewModel类中，我有一个名为"句子"的可观察值，我从JSON中填充这个值，并在输入文本框中使用数据绑定将其显示给用户。

sentence="我的第一次击倒经验是｛0｝"

在UI中，用户还有一些文本框，可以在其中输入值。

experience="良好"

这些输入的值应该被替换为该句子中的带编号的参数。

"我第一次击倒对手的经验很好"

html:

          <select data-bind="options: titles, optionsText: 'title', optionsValue: 'backendName', value: selectedTitleId"></select>
          <input data-bind='text:text/>

js文件：

   var sample = function(){
      var self = this;
      self.selectedTitleId = ko.observable();
      self.text = ko.computed(function () {
        self.displayText = test(self.selectedTitleId(),["hi"]); //This always throws  self.selectedTitleId() is not defined:
         // the real error is parameter[0] is undefined return parameters[0].replace(pattern, function (match, group) {
        console.log(self.displayText)
        //My intention is to return "{" + self.displayText + "}" to the user
        return "{" + self.selectedTitleId() + "}"; //This shows "World is great {0}"
       }); 
 }
 $.getJSON("json/queries.json", function (allData) {
    var mappedTasks = $.map(allData, function (item) {
        return new Task(item.DisplayName, item.BackendFieldName, item.QueryType)
    });
    self.titles(mappedTasks);
});
 function test() {
   return sformat.apply(this, arguments);
 }
  var sformat = (function() {
     var pattern = /{{|}}|{(d+)}/g;
      return function () {
      var parameters = arguments;
       return parameters[0].replace(pattern, function (match, group) {
         var value;
           if (match === "{{")
             return "{";
           if (match === "}}")
             return "}";
           value = parameters[parseInt(group, 10) + 1];
            return value ? value.toString() : "";
       });
  };
})();

如何将self.selectedTitleId作为字符串传递给该测试方法？如果我试图将self.selectedTitleId分配给一个var，它总是抱怨self.selectedTitleId（）没有定义。

我的要求很简单，我有一个可观察的self.selectedTitleId，其中有格式化的字符串，我正在尝试用值替换编号参数，如｛0｝｛1｝。就像我们在java世界中看到的String.format一样。

我们非常感谢在这方面提供的任何帮助。在过去的几天里，我一直在与之斗争。

谢谢你抽出时间！

Answer 1

您有几个问题：

1. 在observable有值之前调用它将返回undefined，这就是为什么会出现错误的原因。只需将可观察项初始化为空字符串（''）即可避免这种情况：

   self.selectedTitleId = ko.observable('');
   

2. 若要正确绑定到input值，需要使用data-bind="value: ..."。text在<p>或<div>等非输入元素上可用，但由于您使用的是输入，因此应该使用value绑定：

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

3. 在ko.computed函数定义中，我认为只使用一个局部变量就足够了：

   self.text = ko.computed(function () {
       // Sidenote: you don't need to pass this function an array:
       var displayText = test(self.selectedTitleId(), "hi");
       return "{" + displayText + "}";
   }); 
   

示例：http://jsfiddle.net/4pfhfbqe/1/

---

更新：

好的，看起来AJAX请求将填充可观察数组时，selectedTitleId就是undefined。我只想添加一个检查，看看在处理之前是否定义了可观察到的：

self.text = ko.computed(function () {
    if (self.selectedTitleId()) {
        var text = test(self.selectedTitleId(), "hi", "bye");
        return "{" + text + "}";
    }
    return '';
});