1

私はこれを見つけましたが、これは私にはうまくいきません：文字列の単純な配列にバインドします

ノックアウトを介して文字列の配列を管理しようとしています。これが私のマークアップです：

<div class="editor-field">
        <table>
            <thead>
                <tr>
                    <th>Page Urls</th>
                    <th></th>
                </tr>
            </thead>
            <!-- ko if: RouteUrls().length > 0 -->
            <tbody data-bind="foreach: RouteUrls">                   
                <tr>
                    <td><span data-bind="text: $data"></span></td>
                    <td><a href="#" class="ui-icon ui-icon-closethick" data-bind="click: $root.removeUrl">Remove</a></td>
                </tr>
            </tbody>
            <!-- /ko -->
            <!-- ko if: RouteUrls().length < 1 -->
            <tbody>
                <tr>    
                    <td colspan="3"> No urls added for editing.</td>
                </tr>
            </tbody>
            <!-- /ko -->
        </table>
        @Html.HiddenFor(x => x.UrlCount, new { data_bind = "value:RouteUrls().length" })
        @Html.ValidationMessageFor(x => x.UrlCount)
    </div>

そして、これが私のノックアウトコードです：

    <script type="text/javascript">
    var mappedModel = ko.mapping.fromJS(@Html.Raw(JsonConvert.SerializeObject(Model)));
    mappedModel.RouteUrls = ko.observableArray([]);
    mappedModel.urlToAdd = ko.observable("/");
    mappedModel.addUrl = function() {
        var duplicateValues = ko.utils.arrayFilter(this.RouteUrls(), function (item) {
                return item == mappedModel.urlToAdd();                   
        });

        if ((this.urlToAdd() != "") && (duplicateValues.length == 0)) // Prevent blanks and duplicates
        {

            this.RouteUrls().push(this.urlToAdd());
            this.urlToAdd("/");
            console.log(this.RouteUrls().length);
            console.log(this.RouteUrls());
        }
    };
    mappedModel.removeUrl = function(url) {
        mappedModel.RouteUrls.remove(url);
    };

    //other code...

    ko.applyBindings(mappedModel);

    $.validator.unobtrusive.parse("#pageCForm");
    $("#pageForm").data("validator").settings.submitHandler = mappedModel.save;
</script>

問題は、私のマークアップでは、コレクションが表示されないことです。URLを追加しようとすると、条件付きでノックアウトを削除してテーブルを表示しただけでも、常に空になります。ページを送信しようとすると、URLカウントの非表示フィールドで目立たない検証が実行され、空のように動作します。したがって、マークアップ内のすべてRouteUrls()が常に空のように動作しています。しかし、RouteUrls（）。lengthとテキストをコンソールに記録すると、次のように追加しようとすると、次のようになります。

1 
["/sdfsd"] 
2 
["/sdfsd", "/trgfd"] 
3 
["/sdfsd", "/trgfd", "/fdfdggdbjn"]

そのため、スクリプトコードで長さと配列が適切に入力される方法がわかりませんが、マークアップに反映されていません。何か助けはありますか？

4

1 に答える 1

3

問題は（おそらく）この行にあります：

this.RouteUrls().push(this.urlToAdd());

Knockoutは、ObservableArrayのプッシュ（および配列を変更する他のすべてのメソッド）を再定義しました。これらのObservableArrayメソッドは、配列を変更してから、オブザーバーをトリガーします。

したがって、次のように置き換える必要があります。

this.RouteUrls.push(this.urlToAdd());

詳細はこちら： http： //knockoutjs.com/documentation/observableArrays.html#manipulating_an_observablearray

于 2013-01-16T18:37:02.290 に答える