Question

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

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

请注意，如果我手动输入字段，添加空格，删除空格并退出字段，则重置行为正常。

以下是代码中的重要摘录：

表单是根据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()

并且，当我想创建一个新实体时，在这个View Model上我调用

vm.resetForm();

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

谢谢

Answer 1

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

自定义绑定处理程序有点工作，但它实际上会使您的HTML更清晰。我以下为你掀起了一个例子，虽然它肯定会有所改善。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您只需使用

即可

<yourElement>.MaterialTextfield.change();

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

2 个答案: