13

我有一个用于翻译的自定义绑定：

ko.bindingHandlers.lang = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        this.lang = [
            'text1':'text1 translated'
            ,'text2':'text2 translated'
        ];
    },
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var keyword = valueAccessor();
        var translatedString = this.lang[keyword];
        $(element).text(translatedString );
    }
};

我这样使用：

<span data-bind="lang:'text1'"></span>

但是，我还有一个用于创建表格行格式的绑定：

ko.bindingHandlers.tableRow = {
    update : function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        $(element).html("<td>" + valueAccessor()[0] + "</td><td>" + valueAccessor()[1] + "</td>");
    }
}

我这样使用：

<tr data-bind="tableRow:['text1','text2']"></tr>

对于这个问题：

现在我想组合这些绑定，这样我就可以像这样调用我的 tableRow 绑定：

<tr data-bind="tableRow:[lang:'text1','text2']"></tr>

上面的代码当然只是举例，实际上这些绑定中还有更多内容。

我已多次阅读文档并花了很长时间寻找解决方案，但找不到任何东西。也许是因为这做不到？

4

2 回答 2

9

您需要做的就是将值从一个 bindingHandler 中继或修改到您要激活的其他值。

因此，在您的 tablerow 处理程序中，调用 init 和 update （在它们各自的函数中）：

ko.bindingHandlers.lang.init(element, valueAccessor, allBindingsAccessor, viewModel)

当然根据需要修改参数。您可能会从数组中获取其中一个值并将其作为第二个参数传递给 init 和 update。

这也是激活其他标准内置绑定的好方法。

更新：添加来自@Joc​​he的评论只是为了使其更具可读性：

var value = valueAccessor(); 
var newValueAccessor = function() {
    return translatedString; }; 
ko.bindingHandlers.lang.init(element, newValueAccessor,
       allBindingsAccessor, viewModel);
于 2013-02-13T11:55:19.063 回答
0

你能不能让你的翻译成为一个正常的功能，然后从你的表格行绑定中调用它？

var translate = function(text)
{
        this.lang = [
            'text1':'text1 translated'
            ,'text2':'text2 translated'
        ];
    },
        var translatedString = this.lang[text];
        return translatedString;
    }
};

然后，您可以将一个额外的参数传递给 tableRow 方法以指示您是否需要翻译：

然后，您可以在表格行绑定函数中调用它：

ko.bindingHandlers.tableRow = {
    update : function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var text1 = valueAccessor()[2] ? translate(valueAccessor()[0]) : valueAccessor()[0];
        var text2 = valueAccessor()[2] ? translate(valueAccessor()[1]) : valueAccessor()[1];
        $(element).html("<td>" + text1 + "</td><td>" + text2 + "</td>");
    }
}

然后你可以直接从绑定元素中调用它：

<span data-bind="text: translate(text1())"></span>
于 2013-02-13T09:46:57.060 回答