Material Design Lite:如何以编程方式重置浮动标签输入文本 [英] Material Design Lite: How to programatically reset a floating label input text

问题描述

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

I am currently building a Single Page App with knockout.js and Material Design Lite.

我有一个允许创建(和保留)新实体的表格.第一次使用该窗体时，浮动标签输入可以正常工作.但是在那之后，如果我通过敲除观察值重置字段的值(即，将字段值设置为"以便能够输入另一个新实体的值)，则浮动标签不会重置:浮动标签仍会浮动字段上方，而字段本身应显示为灰色，不再浮动.

I have a form which allow creating (and persisting) a new entity. The first time the form is used, the floating label input works correctly. But after that, if I reset the values of the fields through knockout observables (i.e. set the field values to "" in order to be able enter the values for another new entity) the floating label doesn't reset: the floating label still floats above the field, while it should be displayed in grey in the field itself without floating anymore.

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

Note that if I manually enter into the field, add space, remove the space and exit the field, the reset behavior is working.

以下是代码的重要摘录:

Here are the important excerpts from the code:

该表单是根据Material Design Lite定义的(请参见 http://www .getmdl.io/components/index.html#textfields-section 带有浮动标签的文本")

The form is defined following the Material Design Lite (see http://www.getmdl.io/components/index.html#textfields-section "text with floating label")

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

在淘汰赛中，我有这段代码:

On the knockout side I have this code:

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

在我的JS中，我创建了ViewModel

In my JS, I create my ViewModel

var vm = new MyViewModel()

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

and, when I want to create a new entity, on this View Model I call

vm.resetForm();

以重置该字段.该字段已正确设置为空值，但未触发浮动布局行为(返回到初始状态).

in order to reset the field. The field is correctly set to the empty value, but the floating layout behavior (going back to initial state) is not triggered.

谢谢

推荐答案

讨论了您的问题

Your issue is discussed here. You need a custom binding handler to add and remove classes (particularly is-dirty) to the div surrounding the input when the bound value changes.

自定义绑定处理程序需要一些工作，但实际上可以使您的HTML更加整洁.我在下面为您提供了一个示例，尽管它肯定可以有所改进.

A custom binding handler is a bit of work, but it will actually make your HTML cleaner. I've whipped up one for you below as an example, although it could surely stand some improvement.

这是一本好书关于这个主题.

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>

这篇关于Material Design Lite:如何以编程方式重置浮动标签输入文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！