Question

在我的根视图模型中，我有objects的可观察数组。

我想要一个下拉列表，允许用户选择该列表的元素（将其命名为current），然后能够将所选对象的property绑定到某些编辑框。

因此，对于用户来说，这看起来像是他/她可以“聚焦”于某个特定对象（使用组合框），然后编辑其属性。

现在在我的html中，我有这样的内容：

<select data-bind="options: objects, optionsText: 'property', value: current, optionsCaption: 'Choose...'"></select>

...用于下拉列表，以及：

<input data-bind="value: current.property"/>

...用于应编辑的属性。

同时，在js中，我做这样的事情：

function ObjectViewModel(p) {
  var self = this;
  self.property = ko.observable(p);
}

function AppViewModel() {
  var self = this;
  self.objects = ko.observableArray([
      new ObjectViewModel("id1"),
      new ObjectViewModel("id2")
  ]);
  self.current = ko.observable();
}

ko.applyBindings(new AppViewModel());

但是，当我在下拉列表中选择值时，没有任何反应。

我怀疑我没有正确管理current的{{1}}属性。

在淘汰赛中实现此目标的正确方法是什么？

Answer 1

您的代码有2个问题：

电流是可以观察到的，因此要评估值，您必须使用“（）”。
  除非设置了current，否则将无法访问
“ current（）。property”。为了避免失败，请检查一下。   希望这会有所帮助。

function ObjectViewModel(p) {
  var self = this;
  self.property = ko.observable(p);
}

function AppViewModel() {
  var self = this;
  self.objects = ko.observableArray([
      new ObjectViewModel("id1"),
      new ObjectViewModel("id2")
  ]);
  self.current = ko.observable();
}

ko.applyBindings(new AppViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select data-bind="options: objects, optionsText: 'property', value: current, optionsCaption: 'Choose...'"></select>


<!-- ko if:current() -->
<h2 data-bind="text:current().property"></h2>
<input data-bind="value:current().property"/>
<!-- /ko -->

Answer 2

只是为了改善Amit Bhoyar的答案（我认为这是点赞的事情），我建议您使用 with 绑定而不是 if 绑定，这样您就不必不必担心调用current().property来绑定值，通过 with 绑定创建当前所选项目的正确上下文，并确保其中的html块仅使用true进行渲染-可观察到的当前值。我还将 value 绑定更改为 textInput 绑定，以更好地响应应用程序对文本输入的更改。

function ObjectViewModel(p) {
  var self = this;
  self.property = ko.observable(p);
}

function AppViewModel() {
  var self = this;
  self.objects = ko.observableArray([
      new ObjectViewModel("id1"),
      new ObjectViewModel("id2")
  ]);
  self.current = ko.observable();
}

ko.applyBindings(new AppViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select data-bind="options: objects, optionsText: 'property', value: current, optionsCaption: 'Choose...'"></select>


<!-- ko with:current -->
<h2 data-bind="text: property"></h2>
<input data-bind="textInput: property"/>
<!-- /ko -->

淘汰赛：针对列表中的对象实施“聚焦”

2 个答案: