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

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

我在表单中使用以下语法：

。我在表单中为特定字段使用此语句。这允许我隐藏未定义的值（实际上不是隐藏，而是从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);

。
.
var myModel=function（）{
var self=这个；
自属性1=可观察到（“非空”）；
self.Property2=ko.observable（）；
//self.IsEmptyOnLoad未实现，如何实现？
};
var m=新的myModel（）；
ko.应用绑定（m）；

你可以试着玩这个游戏

这可能很奇怪，但我确实有一个商业场景：

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

---

如果

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

如果要禁用其他字段并保留第一个字段，可以使用
数据绑定
和
禁用
执行以下操作并删除
语句：

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

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

JS:

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

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

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

更新的Fiddle:
只需使用空的
update
方法创建自定义绑定。您可以在页面加载时的binding
init
中执行任何您想要的操作（更具体地说，在knockout绑定中应用）

工作示例：

让我们更进一步。您询问了如何创建
IsEmptyOnLoad
。您可以通过使用敲除虚拟元素和它们拥有的一些有用方法来实现这一点。例如：
ko.virtualElements.emptyNode
将删除敲除
标记之间的所有内容

工作示例：
一个有趣的问题，迄今为止已经产生了一些创造性的答案。这是一个普遍的趋势，人们似乎有把逻辑放入视图模型的恐惧症。顾名思义，它应该设计为视图和模型之间的接口。首先，我会重新考虑视图模型，类似这样的东西

var myModel = function() {
    var self = this;
    var property = function (content, availibility) {
        return { 
            content: ko.observable(content),
            availibility: availibility
       };
    }
    self.Property1 = property('non-empty', true);
    self.Property2 = property();
};

现在你的HTML可以很简单

<input type="text" data-bind="visible: Property1.availibility, value: Property1.content" />
<input type="text" data-bind="visible: Property2.availibility, value: Property2.content" />



我还提供了一个叉子供你们参考

更新：为简化和减少重复而重新考虑。
保留两份模型副本：加载时的版本和当前正在编辑的版本

var m = { onload : new myModel(), 
          current : new myModel() };
ko.applyBindings(m);

绑定时，将可见性绑定到加载状态，将可编辑值绑定到当前状态：

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

。

您可以创建仅在“if”语句中使用的正常变量（而不是可观察变量）。这样，如果更新字段，“如果”中的条件将不会得到更新：

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

self.initialValue1 = self.Property1();
self.initialValue2 = self.Property2();

并且绑定是：

<!-- ko if: initialValue1 -->.
<input type="text" data-bind="value: Property1" />
<!-- /ko -->
<!-- ko if: initialValue2 -->.
<input type="text" data-bind="value: Property2" />
<!-- /ko -->

。
.

在这里拉小提琴：
希望这有帮助
我通常只是隐藏包含绑定UI项的div，并显示某种“正在加载…”。请创建一个提琴。从目前的情况来看，通过多种方式完成这项任务非常容易，而且应该很简单……这与“正在加载”无关。哎呀，你让赏金溜走了。虽然我觉得你在这里有一些很好的答案。你错过了什么？我犯了一个错误，用名字作为可观察的名字。我有scneario，当我需要时：onload不显示任何空变量。但在页面加载后：不要隐藏任何变量。您的解决方案不起作用。我需要：1）onload不显示任何空变量，隐藏它们，从不显示2）加载所有非空变量后，不要隐藏它们。如果用户在解决方案中编辑了此变量，则显示isempty variables，我不需要它。@renathy那么用户是否会单击某个对象来显示隐藏项？另外，当你说变量时，我认为你指的是页面上的字段/控件，而不是控件中的值？如果我有大约20个项目，那么我不想这样创建。为什么不呢？如果您有20个属性，那么您的视图模型将本质上是大的，我提供了我的代码的重新分解版本，上面的代码稍微整理了源代码并消除了重复，但基本上是以相同的方式工作的。这个答案被否决了，您能提供解释吗？
self.Property1 = ko.observable("non-empty");
self.Property2 = ko.observable();

self.initialValue1 = self.Property1();
self.initialValue2 = self.Property2();

<!-- ko if: initialValue1 -->.
<input type="text" data-bind="value: Property1" />
<!-- /ko -->
<!-- ko if: initialValue2 -->.
<input type="text" data-bind="value: Property2" />
<!-- /ko -->