在页面加载时隐藏空元素,但之后不使用knockout.js

Question

我有一个有很多输入的表格.

我在表单中使用以下语法:<!-- ko if: PropertyName -->.我在特定字段的表单中使用此语句.这允许我隐藏未定义的值(实际上不隐藏,但从DOM中删除).

但是,我不需要动态隐藏它们.我的意思是,当值不为空且已加载时,用户可以编辑它,用户可以清空它.在这种情况下输入消失,我不需要这个.

你能建议我 - 如何改变我的标记和使用什么绑定？

<!-- ko if: IsEmptyOnLoad(Property1) -->.
<input type="text" data-bind="value: Property1" />
<!-- /ko -->

<!-- ko if: IsEmptyOnLoad (Property2) -->.
<input type="text" data-bind="value: Property2" />
<!-- /ko -->

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

    self.Property1= ko.observable("non-empty");
    self.Property2= ko.observable();

    //self.IsEmptyOnLoad  is not implemented, how to implement?
};

var m = new myModel();
ko.applyBindings(m);

您可以尝试使用相应的JSFiddle.

这可能很奇怪,但我确实有业务场景:

• onload不显示任何空变量,因此在加载页面后,只会将非空变量加载到页面中
• 加载页面后,用户可以编辑变量,其中一些变量可以被删除(变空),但在这种情况下我不需要隐藏空变量

Answer 1

如果附加字段为空，您是否只想禁用该附加字段FirstName？我看不出隐藏第一个输入字段（正如您当前所做的那样）将如何工作，因为一旦它消失，它将不允许任何人输入名称。

如果您想禁用其他字段并保留第一个字段，您可以使用data-bindwithdisable执行以下操作并删除<!-- ko if: .... -->语句：

<input type="text" data-bind="value: FirstName" />

<input type="text" data-bind="disable: FirstName().length === 0" />

请参阅更新的小提琴：http://jsfiddle.net/2FTEM/1/

更新

您可以设置一个在加载视图模型后更新的可观察对象：IsPageLoaded您将其设置为 true。我在 JS 中添加了延迟，因此您应该在最后几行更新 observable: 后看到控件出现m.IsPageLoaded(true);。您可能需要用您的代码检查它是否有效（不带setTimeout）。

HTML：

<!-- ko if: IsNotEmpty -->.
<input type="text" data-bind="value: IsNotEmpty" />
<!-- /ko --> 

<!-- ko if: IsEmpty && IsPageLoaded -->.
<input type="text" data-bind="value: ''" />
<!-- /ko --> 

JS：

var myModel = function() {
  var self = this;
  self.IsPageLoaded = ko.observable(false);

  self.IsNotEmpty = ko.observable("non-empty");
  self.IsEmpty = ko.observable(true);

};

var m = new myModel();
ko.applyBindings(m);

// remove this timeout to test in your enviroment - just introduces a delay
setTimeout(function() {
    m.IsPageLoaded(true);
}, 1000);

// simply use
// m.IsPageLoaded(true);

更新的小提琴： http: //jsfiddle.net/2FTEM/4/