Question

我有以下js：

df$sunny <- ifelse(df$weather %in% "sunny", "1", "0")

以下HTML：

var ViewModel = function() {
  var self = this;
  self.projects = ko.observableArray([]);
  self.currentProject = ko.observable();

  self.selectProject = function (project) {
    self.currentProject(project);
  };
}
var vm = new ViewModel();
ko.applyBindings(vm);



$(function() {
    $('#spinner-wrapper').show();
    $.getJSON("some/url", function(data){

        vm.projects(data.projects);
        vm.selectProject(data.projects[0]);
    });
});

因此，每次点击<ul class="nav nav-pills nav-stacked" data-bind="foreach: {data:projects, as: 'project'}"> <li><a href="#" data-bind="text:projectName, click: vm.selectProject"></a></li> </ul> <h1 data-bind="text:currentProject.projectName"></h1>时，都会调用<a>方法，selectProject会正常更改。我遇到的问题是self.currentProject没有显示任何内容。

Answer 1

您的currentProject财产是可观察的。这意味着您必须从中调用获取您的实际财产。该函数没有名为pojectName的属性，因此它将返回undefined（请注意，它不会抛出错误）。

如果您确定currentProject始终拥有projectName属性的对象，则可以轻松修复数据绑定，如下所示：

data-bind="currentProject().projectName"

（了解淘汰如何获取和设置 observables here）

但是，在您的视图模型中，currentProject初始化为值undefined。以下是处理未定义值的一些方法：

使用with绑定（我个人喜好）

with绑定如果其值未正确定义，则不会对其封装的HTML进行渲染或数据绑定：

<h1 data-bind="with: currentProject">
  <span data-bind="text: projectName"></span>
</h1>

缺点：您需要额外的元素或虚拟绑定。当元素被删除时，请注意没有任何奇怪的闪烁......

在viewmodel中创建一个计算属性：

self.currentProjectName = ko.pureComputed(function() {
  var currentProject = self.currentProject();
  return currentProject ? currentProject.projectName : "";
});

缺点：使视图模型混乱。优点：轻松创建空状态/占位符

将其修复为data-bind：

<h1 data-bind="text:currentProject() ? currentProject().projectName : ''"></h1>

这与（2）基本相同。

缺点：使您的视图混乱，容易出现错误。

文本绑定无法正常工作

1 个答案: