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

Question

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

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

请注意，如果我手动输入字段，添加空间，删除空间并退出字段，重置行为正在工作。

下面是从代码中重要的摘录：

的形式定义以下材料设计精简版（见http://www.getmdl.io/components/index.html#textfields-section“文本与浮动标签”）

<form> 
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> 
    <input class="mdl-textfield__input" type="text" id="field1" data-bind="value: field1" /> 
    <label class="mdl-textfield__label" for="field1">Field1 floating label</label> 
    </div> 
</form> 

在淘汰赛身边，我有这个代码：

function MyViewModel() { 
    var self = this; 
    self.field1 = ko.observable(); 
    .... 
    self.resetForm = function() { 
     self.field1(""); 
    } 
    .... 

在我的JS，我创造我的ViewModel

var vm = new MyViewModel() 

，当我想创建一个新的实体，这个视图模型我为了重置场致电

vm.resetForm(); 

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

感谢

Answer 1

您的问题进行了讨论here。您需要一个自定义绑定处理程序，以便在绑定值更改时向输入周围的div添加和删除类（特别是is-dirty）。

自定义绑定处理程序是一个工作，但它实际上会使您的HTML更清洁。作为一个例子，我已经为你举了一个例子，虽然它肯定会有一些改进。

This is a good read关于这个问题。

ko.bindingHandlers.mdlFloatingInput = { 
 
    init: function (element, valueAccessor, allBindingsAccessor, data, context) { 
 
     var $el = $(element), 
 
      $enclosingDiv = $('<div>').insertAfter($el), 
 
      $label = $('<label>'), 
 
      params = valueAccessor(); 
 
     $el.attr('id', params.id); 
 
     $label.attr('for', params.id).text(params.label); 
 
     $el.addClass('mdl-textfield__input'); 
 
     $label.addClass('mdl-textfield__label'); 
 
     $enclosingDiv.addClass("mdl-textfield mdl-js-textfield mdl-textfield--floating-label").append($el).append($label); 
 
     
 
     ko.bindingHandlers.value.init(element, function() { return params.value; }, allBindingsAccessor, data, context); 
 
    }, 
 
    update: function (element, valueAccessor, allBindingsAccessor, data, context) { 
 
     var params = valueAccessor(), 
 
      value = params.value(); 
 
     ko.bindingHandlers.value.update(element, function() { return params.value; }, allBindingsAccessor, data, context); 
 
     $(element).parent()[value ? 'addClass' : 'removeClass']('is-dirty'); 
 
    } 
 
}; 
 

 
function MyViewModel() { 
 
    var self = this; 
 
    self.field1 = ko.observable(''); 
 
    self.resetForm = function() { 
 
     self.field1(""); 
 
    }; 
 
} 
 

 
var vm = new MyViewModel(); 
 

 
ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//storage.googleapis.com/code.getmdl.io/1.0.5/material.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="//storage.googleapis.com/code.getmdl.io/1.0.5/material.indigo-pink.min.css"> 
 

 
<form> 
 
    <input data-bind="mdlFloatingInput: {label: 'Field1 floating label', value: field1, id:'field1'}" /> 
 
    <!--div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> 
 
     <input class="mdl-textfield__input" type="text" id="field2" /> 
 
     <label class="mdl-textfield__label" for="field2">Unbound floating label</label> 
 
    </div--> 
 
</form> 
 
<button data-bind="click:resetForm">Reset</button> 
 
<div data-bind="text:field1"></div>

Answer 2

您可以简单地使用

<yourElement>.MaterialTextfield.change();