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雙列表框淘汰賽綁定

回答

相關問題