Warning: file_get_contents(/data/phpspider/zhask/data//catemap/0/jpa/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Knockout.js 使用select自定义绑定_Knockout.js_Ko Custom Binding - Fatal编程技术网

Knockout.js 使用select自定义绑定

Knockout.js 使用select自定义绑定,knockout.js,ko-custom-binding,Knockout.js,Ko Custom Binding,我试图在knockout中实现自定义绑定,以创建一个select元素。我不使用select绑定的一个区别是,我的select始终是相同的 使用自定义绑定的原因是因为我有很多地方将使用相同的select,我希望这将使我的代码更简单。所以我的尝试可以在中找到,目前我正在努力使用更新功能(我希望能够检索我选择的语言) ko.bindingHandlers.langSelect={ init:函数(元素、值访问器){ var langCur=ko.utils.unwrapobbservable(valu

我试图在knockout中实现自定义绑定,以创建一个select元素。我不使用select绑定的一个区别是,我的select始终是相同的

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

ko.bindingHandlers.langSelect={
init:函数(元素、值访问器){
var langCur=ko.utils.unwrapobbservable(valueAccessor());
ko.utils.domNodeDisposal.addDisposeCallback(元素,函数(){
$(元素).remove();
});
var list='',lang=['en','de','ja'],i,l=lang.length,s='';
对于(i=0;i

有人能帮我吗?如果自定义绑定不是最好的选择,我不介意更改它。

实现所需功能的一个好方法是创建要绑定到的模板。有关模板的更多信息,请访问。下面是一个使用语言选择器的示例:

模板HTML:

使用模板的示例:



你可以找到上面的例子。

我必须说,我真的不明白这一点。如果相同的
select
将显示在不同的位置,为什么不直接放置相同的标记呢?对于重复使用单个源?@GôTô的问题是为每个自定义可观察对象保存所选语言。@robert.westerlund谢谢,我会看一看。@robert.westerlund很酷,谢谢。请将此作为答案发布,以便我能够对其进行投票。
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){

    }
}
<script type="text/html" id="languageSelectorTemplate">
    <select data-bind="options: ['en','de','ja'], value: selectedLanguage"></select>
</script>
function AppViewModel() {
    this.lang = ko.observable("de");
}

ko.applyBindings(new AppViewModel());
<div data-bind="template: {name: 'languageSelectorTemplate', data: { selectedLanguage: lang } }"></div>