javascript - knockoutjs 可观察格式

Question

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

sentence =“我第一次 knockout 的经验是{0}”

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

经验=“好”

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

“我第一次 knockout 的经历很好”

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. 正确绑定(bind)到 input值，您需要使用 data-bind="value: ..."反而。 text可用于非输入元素，如 <p>或<div> ，但由于您正在使用输入，因此您应该使用 value绑定(bind):

   <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 '';
});