0

我有一个简单的情况,我想接受一个文本数组,所以我让用户输入用逗号分隔的数据,并在我的 KO 视图模型中使用 ako.computed来解析它。代码如下所示。(非常感谢 RPN 向我展示了这个技巧)

查看模型

var ViewModel = function() {
    this.values = ko.observableArray(["test1", "test2", "test3", "test4"]);

    this.computedJoinedValues = ko.computed({
        read: function() {
            return this.values().join(",");
        },
        write: function(newValue) {
            this.values(newValue.split(","));   
        },
        owner: this
    });
};

ko.applyBindings(new ViewModel());

HTML

<input data-bind="value: computedJoinedValues" />


<hr/>
<ul data-bind="foreach: values">
    <li data-bind="text: $data"></li>
</ul>

这很好用 - 但我遇到了空格问题,而且我有点大脑脱节。我想修剪每个条目的尾随空格,因为我最终得到了类似的结果tag1, tag2,它实际上被序列化为[ "tag1", " tag2" ]- 所以我认为合适的地方是write函数,所以我尝试了这个......

write: function(newValue) {
    newValue = $.trim(newValue);
    console.log(newValue);
    this.values(newValue.split(","));   
},

但我仍然在数组中得到空格。谁能确定我做错了什么?

4

2 回答 2

1

如果您使用 jQuery,以下代码将对您有所帮助:

write: function(newValue) {
    this.values($.map(newValue.split(","), $.trim)); 
}
于 2013-01-03T01:03:36.350 回答
0

您需要从字符串内部去除空格 - trim() 只是从字符串的开头和结尾去除它:

write: function(newValue) {
  this.values(newValue.replace(/\s/g, '').split(","));
}
于 2013-01-03T01:05:03.967 回答