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