将正则表达式绑定为knockoutjs中的observable

时间:2013-03-29 10:13:07

标签: javascript knockout.js

我是KnockoutJS的新手。我知道如何定义一个可用于更改元素文本(或从文本元素更新)的observable,但是,我希望模型中的数据实际上是具有读/写访问权限的正则表达式。我想使用textarea来设置它:

<textarea data-bind="value: regex"></textarea>

使用以下命令在页面上显示:

<span data-bind="text: regex"></span>

现在初始化正在运行:

//inside the model
this.regex = ko.observable( /,/g );

textareaspan都得到更新(因为本机正则表达式变量有一个toString()函数,可以很好地显示正则表达式的字符串表示形式)。但是当我更改regex中的textarea时,span不会更新。似乎设置observable失败了。

这是可以理解的,因为value中的textarea只是一个文本,为了将其转换为实际的正则表达式,需要一些代码。我有代码。我们称之为function str2regex(),其身体类似于:

//this is pseudo code and doesn't neccesarily work
function str2regex( str )
  var r = str.match( "^\/(.+?)\/([mig])*$" );
  if ( r ) {
    if ( r[2] === null ) {
      return new RegExp( r[1] );
    } else {
      return new RegExp( r[1], r[2] );
    }
  }
  return null;
}

如何使用来自textarea的文本在我的模型中设置正则表达式的值?

1 个答案:

答案 0 :(得分:2)

您应该将str2regex转换为计算的observable,如下所示:

// str2regex transformed to computed observable
self.regex = ko.computed(function(){
    var m = self.regex_string().match(/^\/(.+)\/([mig])*$/);
    return m ? new RegExp(m[1], m[2]) : null;
});

但你仍然应该在textarea中跟踪你的正则表达式字符串是可编辑的(在我的代码中regex_string可观察)。

看看:http://jsbin.com/ofehuj/2/edit