Question

我有一个绑定像这样的值的元素：

<span data-bind="text: myValue"></span>

我将在括号中显示UI中的值而不创建新函数。是否可以在元素内部进行？

Answer 1

由于您正在构建一个字符串，只需评估observable并连接：

<span data-bind="text: '(' + myValue() + ')'"></span>

要检查空值，只需执行以下操作：

<span data-bind="text: myValue() ? '(' + myValue() + ')' : '' "></span>

Answer 2

The answer by @dperry使用text: myValue() ? '(' + myValue() + ')' : ''非常适合快速解决问题，而且我在很多场合都使用过这种方法。它也是技术上你所要求的（因为你提到不想创建＆＃34;一个新功能＆＃34;，我认为它意味着你不想要创建代码背后）。

但是，特别是当事情变得比?:三元运算符更复杂/混乱时，我发现您通常做想要在View Models中执行此操作。由于潜在的重用以及单元可测试性，IMHO视图模型意味着用于此类任务。

所以我仍然会提供替代方案，如果不是OP，那么通过搜索来到这里的其他人。

Knockout为此目的computed observables：

var ViewModel = function() {
  var self = this;

  self.myValue = ko.observable(null);

  self.myValueTxt = ko.computed(function() {
    return !!self.myValue() ? "("+self.myValue()+")" : "";
  });
};

像这样使用：

<span data-bind="text: myValueTxt"></span>

现在，您可以在UI中的多个位置重用myValueTxt，您可以对其进行单元测试，并在更改逻辑时感到安全（例如更改括号或空值上的空字符串）。

这是一个完整的示例，显示了计算单元测试：

＆＃13;

var ViewModel = function() {
  var self = this;

  self.myValue = ko.observable(null);

  self.myValueTxt = ko.computed(function() {
    return !!self.myValue() ? "("+self.myValue()+")" : "";
  });
};

QUnit.test("Can construct default ViewModel", function(assert) {
  assert.ok(!!new ViewModel());
});

QUnit.test("Default ViewModel has null myValue", function(assert) {
  assert.strictEqual(new ViewModel().myValue(), null);
});

QUnit.test("Can set and retrieve myValue", function(assert) {
  var vm = new ViewModel();
  vm.myValue("test test");
  assert.strictEqual(vm.myValue(), "test test");
});

QUnit.test("Default ViewModel has empty string myValueTxt", function(assert) {
  assert.strictEqual(new ViewModel().myValueTxt(), "");
});

QUnit.test("ViewModel with null myValue has empty string myValueTxt", function(assert) {
  var vm = new ViewModel();
  vm.myValue(null);  
  assert.strictEqual(vm.myValueTxt(), "");
});

QUnit.test("ViewModel with empty string myValue has empty string myValueTxt", function(assert) {
  var vm = new ViewModel();
  vm.myValue("");  
  assert.strictEqual(vm.myValueTxt(), "");
});

QUnit.test("ViewModel myValueTxt is wrapped myValue", function(assert) {
  var vm = new ViewModel();
  vm.myValue("test");  
  assert.strictEqual(vm.myValueTxt(), "(test)");
});

＆＃13;

<script src="//code.jquery.com/qunit/qunit-1.20.0.js"></script>
<link href="//code.jquery.com/qunit/qunit-1.20.0.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div id="qunit"></div>

＆＃13;

如何将括号放在一个使用knockout绑定的值周围？

2 个答案: