Question

我是knockoutjs世界的新手。我正在尝试使用knockout.js构建一个非常简单的单页UI。我有一个名为＆＃34;句子＆＃34;在我的viewModel类中，我从JSON填充此值，并使用输入文本框中的data-bind将其显示给用户。

句子=＆＃34;我对淘汰赛的第一次体验是{0}＆＃34;

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

经验=＆＃34;好＆＃34;

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

＆＃34;我第一次参加淘汰赛的经历是好的＆＃34;

HTML：

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

js file：

   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

你有一些问题：

在具有值之前调用observable将返回undefined，这就是您收到错误的原因。只需将observable初始化为空字符串（''）即可避免这种情况：
```
self.selectedTitleId = ko.observable('');
```
要正确绑定到input值，您需要使用data-bind="value: ..."。 text可用于<p>或<div>等非输入元素，但由于您正在处理输入，因此应使用value绑定：
```
<input type="text" data-bind="value: text" />
```

在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。我只是添加一个检查，看看在处理之前是否定义了observable：

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

knockoutjs可观察格式

1 个答案: