8

ノックアウト選択リストのバインディングに問題があります。私の問題は、説明、キー、および編集可能なアイテムのリストを持っていることです。アイテムのリストを使用して、選択ボックスに入力しています。

  var RequiredItemLine = function () {
            var self = this;

            self.desc = ko.observable();
            self.key = ko.observable();
            self.editable = ko.observable(false);

            self.requireditemsdata = ko.observableArray([
               { desc: "Boarding of exposed wall openings in the vicinity of ...", key: "233", editable: true },
               { desc: "Call in manufacturers to initiate repairs on ...", key: "242", editable: true },
               { desc: "Call in specialist restorers/recoverers for ...", key: "244", editable: true },
               { desc: "Dispatch items for repair (schedule enclosed)", key: "243", editable: false },
               { desc: "Drying and cleaning of contents comprising ...", key: "240", editable: true },
               { desc: "Drying and protective oiling of water affected equipment", key: "241", editable: false },
               { desc: "Drying out of the affected areas of the premises", key: "235", editable: false },
               { desc: "Removal and repackaging of stock comprising ...", key: "239", editable: true },
               { desc: "Removal of agreed vulnerable contents to a place of safety (schedule enclosed) ", key: "236", editable: false },
               { desc: "Segregation of affected and unaffected stock comprising ...", key: "238", editable: true },
               { desc: "Temporary covering of roof to reinstate water tight integrity ", key: "234", editable: false },
               { desc: "Temporary guarding of affected area", key: "237", editable: false },
               { desc: "Temporary shoring of affected structure", key: "232", editable: false }]);

            self.selectedItem = ko.observableArray([]);

            self.selectedItem.subscribe(function (newValue) {

                if (newValue) {
                    self.editable(newValue.editable);
                    //alert(newValue.editable);
                }
            });

        }

ユーザーが選択リストからオプションを選択するたびに、編集可能なプロパティが含まれ、選択リストはDOMから非表示にする必要があり、テキストボックスはDOMに表示される必要があり、値は選択リストから選択されたdescから割り当てられる必要があります.

       var RequiredItems = function () {

            var self = this;

            self.requiredItemSelection = ko.observableArray([]);

            self.addRequiredItem = function () {
                self.requiredItemSelection.push(new RequiredItemLine());

            };
            self.removeRequiredItem = function (line) {
                self.requiredItemSelection.remove(line);
            };

        }

        var vm = new RequiredItems();
        ko.applyBindings(vm);

問題は、選択がDOM変更イベントにロードされ、選択リストまたは入力フィールドが発生して表示されるときです。

             <div class='liveExample' > 

     <button data-bind='click: addRequiredItem'>Add Required Item</button>
     <hr />

<table width='100%'>

    <tbody data-bind='foreach: requiredItemSelection'  >
        <tr>
            <td >
                <select data-bind='options: requireditemsdata, optionsText: "desc", value: selectedItem'> </select>
            </td>  

            <td>
                <a href='#' data-bind='click: $parent.removeRequiredItem'> <img src="../images/Close.gif" /></a>
            </td>
        </tr>
        <tr data-bind="visible : selectedItem().editable">
            <td>
                <div class="editablecontent" data-bind='html : selectedItem().desc.replace(/\.\.\./g, "<span style=&#39;background-color:#ff77ee;margin-left:-2px;letter-spacing:0.05em&#39; contenteditable >...</span>")'></div>


            </td> 
        </tr> 

    </tbody>
</table>

<ul data-bind='foreach: requiredItemSelection'>


    <li data-bind="text : selectedItem().desc "></li>
</ul>  




</div>

フィドルを参照してください http://jsfiddle.net/aroor/VFv4H/3/ 注: optionsCaption バインディングを使用したくありません。この問題を解決する方法はありますか？それとも、データ構造を正しく宣言していませんか?

4

2 に答える 2

7

この質問に対する答えを探しているときに、この投稿に出くわしました。これがまだ問題であるかどうかはわかりませんが、おそらく次の人が恩恵を受けるでしょう.

私が正しく理解していれば、問題は、ノックアウト データ バインディングがノックアウト イベントを発生させ、望ましくないロジックを実装することです。実際の JavaScript イベントを比較したところ、ノックアウトによって発生したイベントには、ユーザーの操作によって発生したイベントとは異なるプロパティがあることがわかりました。

これらのプロパティの存在を確認することでこれを解決した方法を次に示します。

これの代わりに：

self.addRequiredItem = function () {
    self.requiredItemSelection.push(new RequiredItemLine());
};

これを試して：

self.addRequiredItem = function (ko_object, js_evt) {
    if(js_evt.cancelable === false) {
        self.requiredItemSelection.push(new RequiredItemLine());
    }
};

ノックアウト モデルと JavaScript イベントをイベントに渡すことができるという事実を利用できますし、利用する必要があります。キャンセル可能プロパティはノックアウト dom イベントには存在しないようです。そのため、イベントがユーザーによってトリガーされたことを確認するために確認しました。

于 2013-06-26T20:35:51.020 に答える