bootstrap双列表框淘汰赛绑定

我在我的ASP.NET MVC项目中使用bootstrap dual listbox pluging。
我也在项目中使用Knockout。我正在尝试为该插件创建bindingHandler，以使其在淘汰赛中顺利运行。bootstrap双列表框淘汰赛绑定

这里是我试过

装订处理器

ko.bindingHandlers.dualList = { 
    init: function (element, valueAccessor) { 
     $(element).bootstrapDualListbox({ 
      selectorMinimalHeight: 160 
     }); 

     $(element).on('change', function() { 
      $(element).bootstrapDualListbox('refresh', true); 
     }); 

     ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
      $(element).bootstrapDualListbox('destroy'); 
     }); 
    }, 
    update: function (element, valueAccessor) { 
     $(element).bootstrapDualListbox('refresh', true); 
    } 
}

HTML

<select class="form-control" data-bind="foreach:{data: EditedElement().Operations, as : 'op'} , dualList: EditedElement().Operations" multiple> 
    <option data-bind="value: op.OperationID(), text: op.Name(), selected: op.IsSelected()"></option> 
</select>

视图模型

function SelectOperationVM(operationId, isSelected, name) { 
    var self = this; 

    self.OperationID = ko.observable(operationId); 
    self.IsSelected = ko.observable(isSelected); 
    self.Name = ko.observable(name); 

    self.copy = function() { 
     return new SelectOperationVM(self.OperationID(), self.IsSelected(), self.Name()); 
    } 
}

我的问题是，我无法在viewModel observableArray和插件之间进行同步。换句话说，我想要在插件（用户删除一些选项或添加一些选项）的变化，以反映在视图模型属性，并反向

来源

2017-04-13 Hakam Fostok

要同步，您需要传递多个observables自定义结合

所以你的HTML应该像

<select class="form-control" data-bind="foreach: { data: Operations, as: 'op'}, dualList: { options: Operations, selected: Selected }" multiple> 
    <option data-bind="value: op.OperationID(), text: op.Name(), selected: op.IsSelected()"></option> 
</select>

和自定义绑定像

ko.bindingHandlers.dualList = { 
    init: function(element, valueAccessor) { 
    var data = ko.utils.unwrapObservable(valueAccessor()); 
    $(element).bootstrapDualListbox({ 
     selectorMinimalHeight: 160 
    }); 

    $(element).on('change', function() { 
     // save selected to an observable 
     data.selected($(element).val());; 
    }); 

    ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
     $(element).bootstrapDualListbox('destroy'); 
    }); 
    }, 
    update: function(element, valueAccessor) { 
    // to view if there is an update (without this "update" will not fire) 
    var options = ko.utils.unwrapObservable(valueAccessor()).options(); 
    $(element).bootstrapDualListbox('refresh', true); 
    } 
}

我也有ç肮脏的工作jsfiddle

来源

2017-04-13 16:51:49 Jag

似乎它是有帮助的，它将检查并接受根据该检查的答案。当我在'binding Handler'之外查询它时，'selected'' observable是'undefined'，你有任何想法可能的原因吗？ –

。 –

非常感谢你，这解决了这个问题，但我不得不说，我对你的代码做了2次修改*这可能对其他人准备好你的答案有帮助* **第一次修改**将'selected'从'observable 'to observableArray' **第二种修改**我需要将'var data = ko.utils.unwrapObservable（valueAccessor（））;'语句移动到'change'事件中。这对于能够从'binding Handler'之外读取'selected'属性非常重要，因为正如我之前所说的，当我试图从模型本身读取这个属性时，我收到了null。 –

bootstrap双列表框淘汰赛绑定

回答

相关问题