eekends jquery-multiselect的一个问题

时间:2014-02-20 01:30:17

标签: jquery css jquery-ui knockout-2.0 jquery-multiselect

我有一个小提示在这里显示这个问题: http://jsfiddle.net/jrwarwick/XEg4K/

请忽略 a)菜单最初没有隐藏并出现在错误的地方问题,这是不相关的。 b)由于某种未知原因,多重选择没有在那个小提琴上工作。

问题: 当像这样重复多选组件时,我遇到了问题。 如果单击较低向下多选的复选框/单选按钮,它将按预期工作。 但是,如果单击标签而不是复选框/收音机,则第一个多选项接收事件而不是打开的事件,第一个多选项将使用实际单击的多选项选项的相应索引值覆盖其值!

这可能有解决方法吗?或者我应该把它放在Eric Hynds bug追踪器上?

感谢。

CODE:

<div class="form-horizontal" style="position: relative">
<div class="control-group">
    <h4 style="margin-left: 10px;">Characteristics</h4>
    <div id="characterisitics" data-bind="with: d">
        <div data-bind="foreach: Rows" class="control-group">
            <label class="control-label" data-bind="text: name"></label>
            <div class="controls">
                <label class="label" for="ddlContent" style="min-width: 60px; text-align: right" data-bind="text: typename"></label>
                <select id="ddlContent" class="input-medium" data-bind="multiSelectCheck:true, minWidth: 150, multiple: typename=='List', selectedOptions: values, header: false, options: TypeContent, optionsText: 'name', optionsValue: 'cvalue'" multiple="multiple">
               </select>
                <input type="text" class="input-large" maxlength="50" data-bind="value: $parent['type' + location]" />
            </div>
        </div>
    </div>
</div>
</div>

<script type="text/javascript">
ko.utils.unwrapObservable(allBindingsAccessor().multiselectOptions) || {};

        // pass the original options to the similar widget option
        if (ko.utils.unwrapObservable(allBindingsAccessor().optionsCaption)) {
            multiselectOptions.noneSelectedText = ko.utils.unwrapObservable(allBindingsAccessor().optionsCaption);
        }
        if (ko.utils.unwrapObservable(allBindingsAccessor().header) === false) {
            multiselectOptions.header = false;
        }
        multiselectOptions.multiple = ko.utils.unwrapObservable(allBindingsAccessor().multiple);
        multiselectOptions.minWidth = ko.utils.unwrapObservable(allBindingsAccessor().minWidth);
        allBindingsAccessor().optionsCaption = '';

        $(element).multiselect(multiselectOptions);
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).multiselect("destroy");
        });
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        // This will be called once when the binding is first applied to an element,
        // and again whenever the associated observable changes value.
        // Update the DOM element based on the supplied values here.
        var multiselectOptions = ko.utils.unwrapObservable(allBindingsAccessor().multiSelectCheck);
        // remove this and use the widget's 

        // pass the original options to the similar widget option

        allBindingsAccessor().optionsCaption = '';

        ko.bindingHandlers.options.update(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);

        setTimeout(function () {
            $(element).multiselect("refresh");
        }, 0);

    }

};

var data = { "d": {
    "type1": ko.observable(),
    "type2": ko.observable(),
    "type3": ko.observable(),
    "Rows": [
      {
        "id": 26,
        "catid": 24,
        "name": "Processor Type",
        "location": 1,
        "type": 1,
        "typename": "Text",
        "TypeContent": [
          {
            "id": 195,
            "name": "Celeron",
            "cvalue": "Celeron",
            "location": 7,
            "name_fixed": "celeron laptops",
            "typeid": 26
          },
          {
            "id": 196,
            "name": "Athlon",
            "cvalue": "Athlon",
            "location": 8,
            "name_fixed": "athlon laptops",
            "typeid": 26
          },
          {
            "id": 599,
            "name": "Centrino",
            "cvalue": "Centrino",
            "location": 9,
            "name_fixed": "centrino laptops",
            "typeid": 26
          },
          {
            "id": 772,
            "name": "PowerPC G4",
            "cvalue": "PowerPC G4",
            "location": 10,
            "name_fixed": "powerpc g4 laptops",
            "typeid": 26
          },
          {
            "id": 969,
            "name": "Sempron",
            "cvalue": "Sempron",
            "location": 11,
            "name_fixed": "sempron laptops",
            "typeid": 26
          },
          {
            "id": 970,
            "name": "Turion 64",
            "cvalue": "Turion 64",
            "location": 12,
            "name_fixed": "turion 64 laptops",
            "typeid": 26
          },
          {
            "id": 2714,
            "name": "Intel Dual Core",
            "cvalue": "Intel Dual Core",
            "location": 13,
            "name_fixed": "intel dual core laptops",
            "typeid": 26
          },
          {
            "id": 3472,
            "name": "Intel Core Duo",
            "cvalue": "Intel Core Duo",
            "location": 14,
            "name_fixed": "intel core duo laptops",
            "typeid": 26
          },
          {
            "id": 3710,
            "name": "C7 M",
            "cvalue": "C7 M",
            "location": 15,
            "name_fixed": "c7 m laptops",
            "typeid": 26
          },
          {
            "id": 3821,
            "name": "Intel Core 2 Duo",
            "cvalue": "Intel Core 2 Duo",
            "location": 16,
            "name_fixed": "intel core 2 duo laptops",
            "typeid": 26
          },
          {
            "id": 3822,
            "name": "Intel Quad Core",
            "cvalue": "Intel Quad Core",
            "location": 17,
            "name_fixed": "intel quad core laptops",
            "typeid": 26
          },
          {
            "id": 3823,
            "name": "Intel Core 2 Quad",
            "cvalue": "Intel Core 2 Quad",
            "location": 19,
            "name_fixed": "intel core 2 quad laptops",
            "typeid": 26
          },
          {
            "id": 4172,
            "name": "Intel Atom",
            "cvalue": "Intel Atom",
            "location": 20,
            "name_fixed": "intel atom laptops",
            "typeid": 26
          },
          {
            "id": 5718,
            "name": "Intel Core i5",
            "cvalue": "Intel Core i5",
            "location": 20,
            "name_fixed": "intel core i5 laptops",
            "typeid": 26
          },
          {
            "id": 5719,
            "name": "Intel Core i7",
            "cvalue": "Intel Core i7",
            "location": 20,
            "name_fixed": "intel core i7 laptops",
            "typeid": 26
          },
          {
            "id": 5822,
            "name": "Intel Core i3",
            "cvalue": "Intel Core i3",
            "location": 20,
            "name_fixed": "intel core i3 laptops",
            "typeid": 26
          },
          {
            "id": 5885,
            "name": "Intel Pentium",
            "cvalue": "Intel Pentium",
            "location": 20,
            "name_fixed": "intel pentium laptops",
            "typeid": 26
          },
          {
            "id": 5924,
            "name": "AMD Phenom",
            "cvalue": "AMD Phenom",
            "location": 20,
            "name_fixed": "amd phenom laptops",
            "typeid": 26
          },
          {
            "id": 5933,
            "name": "Intel Core Solo",
            "cvalue": "Intel Core Solo",
            "location": 20,
            "name_fixed": "intel core solo laptops",
            "typeid": 26
          },
          {
            "id": 5934,
            "name": "Dual Core II",
            "cvalue": "Dual Core II",
            "location": 20,
            "name_fixed": "dual core ii laptops",
            "typeid": 26
          },
          {
            "id": 5942,
            "name": "AMD V Series",
            "cvalue": "AMD V Series",
            "location": 20,
            "name_fixed": "amd v series laptops",
            "typeid": 26
          },
          {
            "id": 5943,
            "name": "Athlon II Neo",
            "cvalue": "Athlon II Neo",
            "location": 20,
            "name_fixed": "athlon ii neo laptops",
            "typeid": 26
          },
          {
            "id": 5967,
            "name": "Celeron 900",
            "cvalue": "Celeron 900",
            "location": 20,
            "name_fixed": "celeron 900 laptops",
            "typeid": 26
          },
          {
            "id": 6018,
            "name": "Atom Dual Core",
            "cvalue": "Atom Dual Core",
            "location": 20,
            "name_fixed": "atom dual core laptops",
            "typeid": 26
          },
          {
            "id": 6059,
            "name": "AMD E350",
            "cvalue": "AMD E350",
            "location": 20,
            "name_fixed": "amd e350 laptops",
            "typeid": 26
          },
          {
            "id": 6161,
            "name": "AMD P340",
            "cvalue": "AMD P340",
            "location": 20,
            "name_fixed": "amd p340 laptops",
            "typeid": 26
          },
          {
            "id": 6567,
            "name": "AMD C50",
            "cvalue": "AMD C50",
            "location": 20,
            "name_fixed": "amd c50 laptops",
            "typeid": 26
          },
          {
            "id": 6589,
            "name": "AMD Turion",
            "cvalue": "AMD Turion",
            "location": 20,
            "name_fixed": "amd turion laptops",
            "typeid": 26
          },
          {
            "id": 6605,
            "name": "AMD Dual-Core",
            "cvalue": "AMD Dual-Core",
            "location": 20,
            "name_fixed": "amd dual core laptops",
            "typeid": 26
          },
          {
            "id": 6827,
            "name": "AMD E-450",
            "cvalue": "AMD E-450",
            "location": 20,
            "name_fixed": "amd e 450 laptops",
            "typeid": 26
          },
          {
            "id": 6828,
            "name": "AMD A-Series",
            "cvalue": "AMD A-Series",
            "location": 20,
            "name_fixed": "amd a series laptops",
            "typeid": 26
          },
          {
            "id": 6829,
            "name": "AMD E-240",
            "cvalue": "AMD E-240",
            "location": 20,
            "name_fixed": "amd e 240 laptops",
            "typeid": 26
          },
          {
            "id": 6903,
            "name": "AMD E2",
            "cvalue": "AMD E2",
            "location": 20,
            "name_fixed": "amd e2 laptops",
            "typeid": 26
          },
          {
            "id": 6905,
            "name": "AMD C-Series",
            "cvalue": "AMD C-Series",
            "location": 20,
            "name_fixed": "amd c series laptops",
            "typeid": 26
          },
          {
            "id": 6906,
            "name": "AMD E-Series",
            "cvalue": "AMD E-Series",
            "location": 20,
            "name_fixed": "amd e series laptops",
            "typeid": 26
          }
        ]
      },
      {
        "id": 493,
        "catid": 24,
        "name": "Weight",
        "location": 2,
        "type": 2,
        "typename": "Range",
        "TypeContent": [
          {
            "id": 4755,
            "name": "1-2 kg",
            "cvalue": "1-2",
            "location": 1,
            "name_fixed": "1 2 kg laptops",
            "typeid": 493
          },
          {
            "id": 4756,
            "name": "2-3 kg",
            "cvalue": "2-3",
            "location": 2,
            "name_fixed": "2 3 kg laptops",
            "typeid": 493
          },
          {
            "id": 4757,
            "name": "3-4 kg",
            "cvalue": "3-4",
            "location": 3,
            "name_fixed": "3 4 kg laptops",
            "typeid": 493
          },
          {
            "id": 4758,
            "name": "4-5 kg",
            "cvalue": "4-5",
            "location": 4,
            "name_fixed": "4 5 kg laptops",
            "typeid": 493
          }
        ]
      },
      {
        "id": 704,
        "catid": 24,
        "name": "Display Resolution",
        "location": 3,
        "type": 3,
        "typename": "List",
        "TypeContent": [
          {
            "id": 6982,
            "name": "2880x1800",
            "cvalue": "2880x1800",
            "location": 1,
            "name_fixed": "2880x1800 laptops",
            "typeid": 704
          },
          {
            "id": 6981,
            "name": "2560x1600",
            "cvalue": "2560x1600",
            "location": 2,
            "name_fixed": "2560x1600 laptops",
            "typeid": 704
          },
          {
            "id": 6973,
            "name": "1920x1080",
            "cvalue": "1920x1080",
            "location": 2,
            "name_fixed": "1920x1080 laptops",
            "typeid": 704
          },
          {
            "id": 6974,
            "name": "1680x1080",
            "cvalue": "1680x1080",
            "location": 2,
            "name_fixed": "1680x1080 laptops",
            "typeid": 704
          },
          {
            "id": 6975,
            "name": "1600x900",
            "cvalue": "1600x900",
            "location": 3,
            "name_fixed": "1600x900 laptops",
            "typeid": 704
          },
          {
            "id": 6976,
            "name": "1440x900",
            "cvalue": "1440x900",
            "location": 4,
            "name_fixed": "1440x900 laptops",
            "typeid": 704
          },
          {
            "id": 6977,
            "name": "1366x768",
            "cvalue": "1366x768",
            "location": 5,
            "name_fixed": "1366x768 laptops",
            "typeid": 704
          },
          {
            "id": 6978,
            "name": "1280x1024",
            "cvalue": "1280x1024",
            "location": 6,
            "name_fixed": "1280x1024 laptops",
            "typeid": 704
          },
          {
            "id": 6979,
            "name": "1280x800",
            "cvalue": "1280x800",
            "location": 7,
            "name_fixed": "1280x800 laptops",
            "typeid": 704
          },
          {
            "id": 6980,
            "name": "1280x720",
            "cvalue": "1280x720",
            "location": 8,
            "name_fixed": "1280x720 laptops",
            "typeid": 704
          },
          {
            "id": 6986,
            "name": "1024x600",
            "cvalue": "1024x600",
            "location": 9,
            "name_fixed": "1024x600 laptops",
            "typeid": 704
          }
        ]
      }
    ]
  }
};

ko.utils.arrayForEach(data.d.Rows, function (o, i) {
    o.values = ko.observableArray((data.d['type' + o.location]() + '').replace(', ', ',').split(','));
    o.values.subscribe(function () { data.d['type' + this.location](this.values().join(',')) }, o);
});

ko.applyBindings(data);
</script>

1 个答案:

答案 0 :(得分:0)

我现在意识到了这个问题。

每个选择框都需要一个唯一的ID。

将它整理出来。