2013-10-08 35 views
1

嗨我想用Durandal(http://jsfiddle.net/anasnakawa/6XvqX/381/), 使用Select2(多选),但弹出窗口不工作下面是我的虚拟机和HTML的一部分,在这里我试图绑定状态列表输入它应该工作作为自动完成,但似乎显示选择弹出菜单的问题,可以有人帮使用Select2与Durandal

define(['durandal/app', 'services/datacontext', 'plugins/router', 'services/bindinghandlers'], 
function (app, datacontext, router) { 
    var withs = ko.observableArray(), 
     states = [ 
    { id: "AL", text: "Alabama" }, 
    { id: "AK", text: "Alaska" }, 
    { id: "AZ", text: "Arizona" }, 
    { id: "AR", text: "Arkansas" }, 
    { id: "CA", text: "California" }, 
    { id: "CO", text: "Colorado" }, 
    { id: "CT", text: "Connecticut" }, 
    { id: "DE", text: "Delaware" }, 
    { id: "FL", text: "Florida" }, 
    { id: "GA", text: "Georgia" }, 
    { id: "HI", text: "Hawaii" }, 
    { id: "ID", text: "Idaho" }, 
    { id: "IL", text: "Illinois" }, 
    { id: "IN", text: "Indiana" }, 
    { id: "IA", text: "Iowa" }, 
    { id: "KS", text: "Kansas" }, 
    { id: "KY", text: "Kentucky" }, 
    { id: "LA", text: "Louisiana" }, 
    { id: "ME", text: "Maine" }, 
    { id: "MD", text: "Maryland" }, 
    { id: "MA", text: "Massachusetts" }, 
    { id: "MI", text: "Michigan" }, 
    { id: "MN", text: "Minnesota" }, 
    { id: "MS", text: "Mississippi" }, 
    { id: "MO", text: "Missouri" }, 
    { id: "MT", text: "Montana" }, 
    { id: "NE", text: "Nebraska" }, 
    { id: "NV", text: "Nevada" }, 
    { id: "NH", text: "New Hampshire" }, 
    { id: "NJ", text: "New Jersey" }, 
    { id: "NM", text: "New Mexico" }, 
    { id: "NY", text: "New York" }, 
    { id: "NC", text: "North Carolina" }, 
    { id: "ND", text: "North Dakota" }, 
    { id: "OH", text: "Ohio" }, 
    { id: "OK", text: "Oklahoma" }, 
    { id: "OR", text: "Oregon" }, 
    { id: "PA", text: "Pennsylvania" }, 
    { id: "RI", text: "Rhode Island" }, 
    { id: "SC", text: "South Carolina" }, 
    { id: "SD", text: "South Dakota" }, 
    { id: "TN", text: "Tennessee" }, 
    { id: "TX", text: "Texas" }, 
    { id: "UT", text: "Utah" }, 
    { id: "VT", text: "Vermont" }, 
    { id: "VA", text: "Virginia" }, 
    { id: "WA", text: "Washington" }, 
    { id: "WV", text: "West Virginia" }, 
    { id: "WI", text: "Wisconsin" }, 
    { id: "WY", text: "Wyoming" } 
     ]; 
    var vm = {   

     withs: withs,    
     states: states, 

    }; 

    return vm; 
}); 

<select multiple="true" data-bind="options: states, optionsValue: 'id', optionsText: 'text', selectedOptions: withs, select2: {}" style="width: 300px"></select> 
+0

哪里是你的选择2自定义绑定处理程序? –

回答

0
  1. 注册select2里面main.js的Require.js配置:

    requirejs.config({ 
        paths: { 
        'select2': 'path/to/select2' 
        } 
    }); 
    
  2. 定义它在你的视图模型:

    define(['select2'], function (select2) { 
        // ... 
    }); 
    
  3. 不要忘了申报。你将不得不使用attached回调:

    var vm = { 
        withs: withs, 
        states: states, 
        attached: function() { 
        $('select').select2(); 
        } 
    }; 
    
+1

我并不是想听起来很刺耳,但对于自定义绑定处理程序来说,这是一个完美的情况。通过使用附加的事件,您将不得不在DOM操作的视图模型中添加大量代码。/ –

+0

是的,您是对的。特别是如果你在同一页面上处理多个选择。我意识到这一点,因为我正在查看OP提供的jsFiddle。 – Norbert