Knockout.js Material Design Lite：如何以编程方式重置浮动标签输入文本

我目前正在使用knockout.js和Material Design Lite构建一个单页应用程序

我有一个允许创建（和持久化）新实体的表单。第一次使用表单时，浮动标签输入工作正常。但在此之后，如果我通过剔除观察值重置字段的值（即，将字段值设置为“”，以便能够输入另一个新实体的值），浮动标签不会重置：浮动标签仍然浮动在字段上方，而它应该在字段本身中以灰色显示，不再浮动

请注意，如果我手动输入该字段、添加空间、删除空间并退出该字段，则重置行为有效

以下是代码的重要摘录：

根据材料设计Lite定义表格（见“带浮动标签的文本”）

在我的JS中，我创建了我的ViewModel

var vm = new MyViewModel()

当我想要创建一个新的实体时，在这个视图模型上我调用

vm.resetForm();

以便重置该字段。该字段已正确设置为空值，但不会触发浮动布局行为（返回初始状态）

谢谢

我们已经讨论了您的问题。当绑定值更改时，您需要一个自定义绑定处理程序来向围绕输入的div添加和删除类（尤其是

是脏的

）

自定义绑定处理程序是一项工作，但它实际上会使HTML更干净。下面我给大家举了一个例子，虽然它肯定会有一些改进

关于这个问题

ko.bindingHandlers.mdlFloatingInput={
init：函数（元素、valueAccessor、allBindingsAccessor、数据、上下文）{
变量$el=$（元素），
$enclosuringdiv=$（''）.insertAfter（$el），
$label=$（''），
params=valueAccessor（）；
$el.attr（'id'，参数id）；
$label.attr（'for'，params.id.）.text（params.label）；
$el.addClass（'mdl-textfield__输入'）；
$label.addClass（'mdl-textfield__标签'）；
$enclosingDiv.addClass（“mdl textfield mdl js textfield mdl textfield--floating label”）.append（$el.append（$label）；
init（元素，函数（）{return params.value；}，allBindingsAccessor，data，context）；
},
更新：函数（元素、valueAccessor、allBindingsAccessor、数据、上下文）{
var params=valueAccessor（），
value=params.value（）；
update（元素，函数（）{return params.value；}，allBindingsAccessor，数据，上下文）；
$（element）.parent（）[值？'addClass'：'removeClass']（'is-dirty'）；
}
};
函数MyViewModel（）{
var self=这个；
self.field1=ko.可观察（“”）；
self.resetForm=函数（）{
self.field1（“”）；
};
}
var vm=新的MyViewModel（）；
ko.应用绑定（vm）

重置
我们将讨论您的问题。当绑定值更改时，您需要一个自定义绑定处理程序来向围绕输入的div添加和删除类（尤其是
是脏的
）

自定义绑定处理程序是一项工作，但它实际上会使HTML更干净。下面我给大家举了一个例子，虽然它肯定会有一些改进

关于这个问题


ko.bindingHandlers.mdlFloatingInput={
init：函数（元素、valueAccessor、allBindingsAccessor、数据、上下文）{
变量$el=$（元素），
$enclosuringdiv=$（''）.insertAfter（$el），
$label=$（''），
params=valueAccessor（）；
$el.attr（'id'，参数id）；
$label.attr（'for'，params.id.）.text（params.label）；
$el.addClass（'mdl-textfield__输入'）；
$label.addClass（'mdl-textfield__标签'）；
$enclosingDiv.addClass（“mdl textfield mdl js textfield mdl textfield--floating label”）.append（$el.append（$label）；
init（元素，函数（）{return params.value；}，allBindingsAccessor，data，context）；
},
更新：函数（元素、valueAccessor、allBindingsAccessor、数据、上下文）{
var params=valueAccessor（），
value=params.value（）；
update（元素，函数（）{return params.value；}，allBindingsAccessor，数据，上下文）；
$（element）.parent（）[值？'addClass'：'removeClass']（'is-dirty'）；
}
};
函数MyViewModel（）{
var self=这个；
self.field1=ko.可观察（“”）；
self.resetForm=函数（）{
self.field1（“”）；
};
}
var vm=新的MyViewModel（）；
ko.应用绑定（vm）

重置
您只需使用

<yourElement>.MaterialTextfield.change();

.MaterialTextfield.change（）；
您只需使用

<yourElement>.MaterialTextfield.change();

.MaterialTextfield.change（）；
我们确实需要看一些代码@RoyJ嗨Roy，我添加了代码，希望能有所帮助。我们真的需要看一些代码@RoyJ嗨Roy，我添加了代码，希望能有所帮助。哇！非常感谢您的详细回答和指导！哇！非常感谢您的详细回答和指导！idk为什么整个事情没有发布，而是document.querySelector（“.mdl textfield”）、MaterialTextfield.change（）；idk为什么整个事情没有发布，而是document.querySelector（“.mdl textfield”）、MaterialTextfield.change（）；
<yourElement>.MaterialTextfield.change();