Question

我正在尝试创建一个可以让用户编辑文件属性的表单。

我想允许用户更改文件的基本名称，但扩展名应保持只读。

我的链接对象有一个fileName属性，其中包含实际的文件名，包括扩展名。

我的模板使用转换器来分割文件名部分，并在用户编辑字段后重建完整的文件名。

但是，我没有找到一种方法将参数传递给我的转换后转换器。具体来说，我不知道如何将扩展传递给转换返回方法。

这是一个小型的复制品：

(function($) {
  var getBaseName = function(value) {
    if (!value || (typeof value !== 'string')) return null;
    var lastDot = value.lastIndexOf('.');
    if (lastDot >= 0) {
      return value.substring(0, lastDot);
    }
    return value;
  };
  var getFileExtension = function(value) {
    if (!value || (typeof value !== 'string')) return null;
    var lastDot = value.lastIndexOf('.');
    if (lastDot >= 0) {
      return value.substring(lastDot);
    }
    return null;
  };
  var toFileName = function(value) {
    // how to get the extension here ?
    return value;
  };

  var dataVm = {
    fileName: "somefile.png"
  };
  $.views.converters({
    getBaseName: getBaseName,
    getFileExtension: getFileExtension,
    toFileName: toFileName
  });

  $.templates("#mainTemplate").link("#container", dataVm);
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.90/jsviews.min.js"></script>


<script id="mainTemplate" type="text/x-jsrender">
  <p>Actual file name :
    <b data-link="fileName"></b></p>
  <br/>

  <input data-link="{getBaseName:fileName:toFileName}" />
  <span data-link="{getFileExtension:fileName}"></span>
</script>

<div id="container">

</div>

特别是，在这一行，<input data-link="{getBaseName:fileName:toFileName}" />如何为toFileName提供参数？

我尝试了jsRender pi的一些语法，但我没有成功。

作为一种解决方法，如果我将扩展保留在dataVm中，我能够使其工作：

  var dataVm = {
    fileName: "somefile.png",
    extension: getFileExtension("somefile.png")
  };

并访问转换器中的上下文：

  var toFileName = function(value) {        
    return value + this.ctx.root.extension;
  };

这实际上有效，但它在转换器和数据视图模型之间创建了依赖关系。而且，这不应该适用于网格。最终，转换器应该是转换器集合的一部分，而不知道它的用法。

Answer 1

转换器的this指针是标记实例 - 请参阅http://www.jsviews.com/#convertersapi。

即使使用data-link="{cvt:...:cvtBack}"，您也拥有{: ...}标记的实例。它使您能够通过this.tagCtx，this.linkCtx等获取有用的属性。您可以使用this.tagCtx.args[0]获取完整的文件名字符串。

更简单的是，您可以将fileExtension存储为标记实例中的属性：

(function($) {
  var getBaseName = function(value) {
    if (!value || (typeof value !== 'string')) return null;
    var lastDot = value.lastIndexOf('.');
    if (lastDot >= 0) {
      // store fileExtension on tag instance
      this.fileExtension = value.substring(lastDot);
      return value.substring(0, lastDot);
    }
    return value;
  };
  var getFileExtension = function(value) {
    if (!value || (typeof value !== 'string')) return null;
    var lastDot = value.lastIndexOf('.');
    if (lastDot >= 0) {
      return value.substring(lastDot);
    }
    return null;
  };
  var toFileName = function(value) {
    return value + this.fileExtension;
  };

  var dataVm = {
    fileName: "somefile.png"
  };
  $.views.converters({
    getBaseName: getBaseName,
    getFileExtension: getFileExtension,
    toFileName: toFileName
  });

  $.templates("#mainTemplate").link("#container", dataVm);
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.90/jsviews.min.js"></script>


<script id="mainTemplate" type="text/x-jsrender">
  <p>Actual file name :
    <b data-link="fileName"></b></p>
  <br/>

  <input data-link="{getBaseName:fileName:toFileName}" />
  <span data-link="{getFileExtension:fileName}"></span>
</script>

<div id="container">

</div>

转换回双向数据绑定控件

1 个答案: