0

フォームのフィールドを並べ替える以下の簡単な例。行の横にある[トップ]ボタンを押すたびに、リストの一番上に移動する必要があります。ボタンはいくつか奇妙な方法で機能しているように見えますが、議論のためにボタンについて説明します。下から始めて、各ボタンをクリックします。console.logは、field.orderが常に1であることを示していますが、最後の2つに到達するまでにUIが完全に一致していないことがわかります。それらはテキストボックスに「10」と「20」として残りますが、これは間違っていますが、順序は正しく切り替えられています。

これはコバグですか、それとも私は何かを逃しましたか？

注：コードを直接コピーしてhtmlファイルに貼り付けて実行できるはずです。

<html>
<head>
<script src="http://knockoutjs.com/js/knockout-2.0.0.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    function Field(name, order)
    {
        this.name = name;
        this.order = order;
    }

    function Form() {
        this.name = ko.observable("Test");
        this.fields = ko.observableArray();

        this.fields.push(new Field("field a", 10));
        this.fields.push(new Field("field b", 20));
        this.fields.push(new Field("field c", 30));
        this.fields.push(new Field("field d", 40));
        this.fields.push(new Field("field e", 50));
        this.fields.push(new Field("field f", 60));
    }

    function AppViewModel() {
        var self = this;
        self.selectedForm = ko.observable(new Form());

        reorderItems = function () {
            self.selectedForm().fields.sort(
            function (left, right) {
                return (left.order == right.order)
                    ? 0 : ((left.order < right.order) ? -1 : 1)
            });
        }

        fieldMove = function (field) {
            // find field in parent
            var fldIdx = self.selectedForm().fields().indexOf(field);

            field.order = 1;
            console.log(field.order);
            field.name = field.name + field.order;

            // re-order the items
            reorderItems();
        }
    }

    $(document).ready(function () {
        // Activates knockout.js
        ko.applyBindings(new AppViewModel());
    });
</script>
</head>
<body>
    <div class="form" data-bind="with: selectedForm">
    <!-- ko foreach: fields -->
    <div class="field">
        <span data-bind="html: name"></span>
        <input data-bind="value: order"></input>
        <button data-bind="click: fieldMove">Top</button>
    </div>
    <!-- /ko -->
</div>
</body>
4

1 に答える 1

2

なぜ問題が発生したのか正確にはわかりませんが、の標準プロパティを監視可能なプロパティに置き換えることで、これを機能させることができましnameたorder。

この作業フィドルは解決策を示しています

于 2012-04-20T14:56:57.603 に答える