Question

有时我在视图模型中有多个元素，我在视图中多次访问，我希望能够从视图上下文中分配一个别名以缩短内容。

我正在寻找与foreach as别名或with类似的内容，但我可以在单个任意访问中使用。

例如，在下文中，我可能希望将$root.form().budget.budgetEndDate别名为endDate

<input id="foo" type="text" data-bind="dateTimePicker: $root.form().budget.budgetEndDate" />

然后我可以将绑定重写为

<input id="foo" type="text" data-bind="dateTimePicker: endDate" />

Answer 1

两个选项。

首先，仅出于演示目的但不太推荐，您应该污染全局命名空间：

function Root() {
  this.form = ko.observable(new Form());
}

function Form() {
  this.budget = {
    budgetEndDate: ko.observable("dummy budget end date")
  };
  
  window["endDate"] = this.budget.budgetEndDate;
}

ko.applyBindings(new Root());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<div>
  endDate outside form: <b data-bind="text: endDate"></b>
</div>
<div data-bind="with: form">
  <div>inside form: <b data-bind="text: endDate"></b></div>
  <div data-bind="with: budget">
    <div>inside form.budget: <b data-bind="text: endDate"></b></div>
  </div>
</div>

其次，您可以将其放在$root：

上

function Root() {
  this.form = ko.observable(new Form());
  
  this.endDate = this.form().budget.budgetEndDate;
}

function Form() {
  this.budget = {
    budgetEndDate: ko.observable("dummy budget end date")
  };
}

ko.applyBindings(new Root());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<div>
  endDate outside form: <b data-bind="text: $root.endDate"></b>
</div>
<div data-bind="with: form">
  <div>inside form: <b data-bind="text: $root.endDate"></b></div>
  <div data-bind="with: budget">
    <div>inside form.budget: <b data-bind="text: $root.endDate"></b></div>
  </div>
</div>

然而，从主观上看，我认为这是设计气味和/或XY问题。绑定到budgetEndDate的位置应该是直接访问它的正确上下文/视图。您应该考虑将该observable移动到视图模型的另一部分。

在Knockout中创建别名？

1 个答案: