1

knockout.js 2.2.0 にアップグレードしたところ、計算されたオブザーバブルで foreach ステートメントが機能しなくなりました。2.1に戻すと動作します。計算されたオブザーバブルは、以下の html にupdatedValues再設定されません。foreach以下の html は、単一の ajax ページの dom に動的に挿入され、バインディングが適用されることに注意してください。

ko.bindingHandlers.fields = {
        init: function (element, valueAccessor) {

            var value = ko.utils.unwrapObservable(valueAccessor());

            app.viewModel.members.meta = {
                values: ko.observableArray(value.values),
                remove: function () {
                    app.viewModel.members.meta.values.remove(this);
                    return false;
                },
                add: function () {
                    app.viewModel.members.meta.values.push({ Name: '', Value: '', Index: ko.observable(app.viewModel.members.meta.values().length) });
                    return false;
                },
                max: value.max
            };

            app.viewModel.members.meta.updatedValues = ko.computed(function () {
                if (this.values()) {
                    for (var i = 0; i < this.values().length; i++) {
                        if (this.values()[i].Index)
                            this.values()[i].Index(i);
                        else
                            this.values()[i].Index = ko.observable(i);
                    }
                }

                return this.values;
            }, app.viewModel.members.meta);
        }
    };

<div class="control-group">
    @Html.LabelFor(q => q, "Custom Fields") 
    <div class="controls">
        <div class="meta" data-bind="fields: { values: @Model.Meta.OrderBy(q => q.Name).ToJSON(), max: @Model.MaxCount }">
            <div data-bind="foreach: members.meta.updatedValues">
                <div class="form-inline">
                    <div class="input-prepend">
                        <span class="add-on">Name</span>
                        @Html.TextBox("Key", string.Empty, new { maxvalue = "100", data_bind = "value: Name, attr: { name: '" + Model.PropertyName + "[' + Index() + '].Name', id: '" + Model.PropertyName + "[' + Index() + '].Name' }" })
                    </div>
                    @if(!Model.HideValues)
                    {
                        <div class="input-prepend">
                            <span class="add-on">Value</span>
                            @Html.TextBox("Value", string.Empty, new {data_bind = "value: Value, attr: { name: '" + Model.PropertyName + "[' + Index() + '].Value', id: '" + Model.PropertyName + "[' + Index() + '].Value' }"})
                        </div>
                    }
                    <a href="#" class="btn btn-mini btn-danger" title="Remove Field" data-bind="click: $parent.members.meta.remove"><i class="icon-minus icon-white"></i></a>
                </div>
            </div>
            <div class="control-group">
                @Html.Button("New Field", new { type="button", @class="btn", data_bind = "click: members.meta.add, visible: members.meta.max >= members.meta.values().length" })
                @Html.Partial(MVC.Shared.Views.Controls.Help, new HelpModel { Url = Url.Action(Model.ActionResult ?? MVC.Members.Dashboard.CustomFieldsHelp()), Title = Model.Title ?? "Custom Fields" })
            </div>
        </div>
    </div>
</div>
4

1 に答える 1

2

Knockout 2.2.0 releaseで行われた更新について見てみましょう。

foreach とテンプレートの機能強化

テンプレート名に関数を使用すると、バインディング コンテキストを 2 番目の引数として受け取るようになりました。

foreach 機能は、アイテムを再レンダリングするのではなく、移動されたアイテムを理解し、そのコンテンツを移動するために最善を尽くすようになりました。

foreach 機能の使用時に beforeMove および afterMove コールバックを構成できるようになりました。

foreach および template バインディングは、$data にエイリアスを与える as オプションを受け入れるようになりました。

afterRender、beforeRemove、afterAdd、beforeMove、および afterMove コールバックは依存関係を引き起こさなくなりました。

Knockout 2.2では、使用時にオブザーバブルを 2 回アンラップしないvalues: [] ため、computed は単純な配列を返す必要があると思います。foreach()

ここでいつでも問題を記録できます: https://github.com/SteveSanderson/knockout/issues

于 2012-11-09T21:22:36.770 に答える