使用 select 自定义绑定答案

【问题标题】：Custom binding with select使用 select 自定义绑定
【发布时间】：2015-11-13 21:59:58
【问题描述】：

我正在尝试在淘汰赛中实现自定义绑定以创建选择元素。我不使用选择绑定的一个不同之处 - 是因为我的选择总是相同的。

使用自定义绑定背后的原因是因为我有很多地方会使用相同的选择，我希望这将使我的代码更简单。所以我的尝试可以在this fiddle 中找到，目前我正在努力使用更新功能（我希望能够检索我选择的语言）。

ko.bindingHandlers.langSelect = {
    init: function(element, valueAccessor){
        var langCur = ko.utils.unwrapObservable(valueAccessor());
        ko.utils.domNodeDisposal.addDisposeCallback(element, function (){
            $(element).remove();
        });

        var list = '', lang = ['en', 'de', 'ja'], i, l = lang.length, s ='';
        for (i = 0; i < l; i++){
            s = (lang[i] === langCur ) ? 'selected' : '';
            list += '<option value="'+ lang[i] +'"'+ s +'>'+ lang[i] +'</option>';
        }

        $(element).html(list);
    },
    update: function(element, valueAccessor){

    }
}

谁能帮我解决这个问题？如果自定义绑定不是最佳选择，我不介意更改它。

【问题讨论】：

我真的不明白这一点，我必须说。如果要在不同的地方显示相同的select，为什么不放相同的标记呢？重复使用单一来源？
@GôTô 的重点是为每个自定义 observable 保存选定的语言。
@robert.westerlund 谢谢，我去看看。
@robert.westerlund 很酷，谢谢。请将此作为答案发布，以便我能够投票。

标签： knockout.js ko-custom-binding

【解决方案1】：

获得所需内容的好方法是创建要绑定的模板。您可以在the knockout documentation page for the template binding 阅读有关模板的更多信息。这是您的语言选择器的示例：

模板 HTML：

<script type="text/html" id="languageSelectorTemplate">
    <select data-bind="options: ['en','de','ja'], value: selectedLanguage"></select>
</script>

JS：

function AppViewModel() {
    this.lang = ko.observable("de");
}

ko.applyBindings(new AppViewModel());

模板使用示例：

<div data-bind="template: {name: 'languageSelectorTemplate', data: { selectedLanguage: lang } }"></div>

您可以在http://jsfiddle.net/8a9JB/2/ 找到上面运行的示例。

【讨论】：