时间戳

首页 > 解决方案 > 淘汰赛：在列表中的对象上实现“聚焦”

javascript - 淘汰赛：在列表中的对象上实现“聚焦”

问题描述

在我的根视图模型中，我有可观察的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财产AppViewModel。

在淘汰赛中实现这一点的正确方法是什么？

标签： javascriptknockout.js

解决方案

您的代码有 2 个问题：

  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 -->

推荐阅读